Skip to main content

Getting Started

Introduction​

react-bootstrap-table-ng support following features in react-bootstrap-table-ng-toolkit package:

  • Export CSV
  • Table Search
  • Column Toggle

Installation​

$ npm install react-bootstrap-table-ng-toolkit --save

Add CSS​

// es5 
require('react-bootstrap-table-ng-toolkit/dist/react-bootstrap-table-ng-toolkit.min.css');

// es6
import 'react-bootstrap-table-ng-toolkit/dist/react-bootstrap-table-ng-toolkit.min.css';

Usage​

react-bootstrap-table-ng-toolkit default give you a react context wrapper: ToolkitProvider. When you use any toolkit functionalities, you are supposed to render toolkit component and BootstrapTable as the children of ToolkitProvider:

import ToolkitProvider from 'react-bootstrap-table-ng-toolkit';


<ToolkitProvider
  keyField="id"
  data={ products }
  columns={ columns }
>
  {
    props =>
      `<BootstrapTable` { ...props.baseProps } />`
  }
</ToolkitProvider>

In addition, You have to move following required props from BootstraTable to ToolkitProvider and inject them to BootstrapTable from the baseProps provided by ToolkitProvider:

Additional props on ToolkitProvider​

  • search: For enabling search.
  • exportCSV: For enabling export CSV.
  • columnToggle: For enabling column toggle.

Available children props​

ToolkitProvider will pass following props to the childrens:

  • baseProps: It have the basic props from ToolkitProvider and also contain few internal data.
  • searchProps: props for search component.
  • csvProps: props for export csv component.
  • columnToggleProps: props for column toggle component.