react-bootstrap-table2-toolkit

react-bootstrap-table2-toolkit

react-bootstrap-table2 support some additional features in react-bootstrap-table2-toolkit.

In the future, this toolkit will support other feature like row delete, insert etc. Right now we only support Table Search and CSV export.

Live Demo For Table Search

API&Props Definitation

Install

$ npm install react-bootstrap-table2-toolkit --save

Add CSS

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

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

Table Search

import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';

const { SearchBar } = Search;
//...

  <ToolkitProvider
    keyField="id"
    data={ products }
    columns={ columns }
    search
  >
    {
      props => (
        <div>
          <h3>Input something at below input field:</h3>
          <SearchBar { ...props.searchProps } />
          <hr />
          <BootstrapTable
            { ...props.baseProps }
          />
        </div>
      )
    }
  </ToolkitProvider>

• You have to enable the search functionality via search prop on ToolkitProvider.

• ToolkitProvider is a wrapper of react context, you are supposed to wrap the BootstrapTable and SearchBar as the child of ToolkitProvider

• You should render SearchBar with searchProps as well. The position of SearchBar is depends on you.

Search Options

searchFormatted - [bool]

If you want to search on the formatted data, you are supposed to enable this props. react-bootstrap-table2 will check if you define the column.formatter when doing search.

<ToolkitProvider
  keyField="id"
  data={ products }
  columns={ columns }
  search={ {
    searchFormatted: true
  } }
>
  // ...
</ToolkitProvider>

Export CSV

There are two step to enable the export CSV functionality:

• Give exportCSV prop as true on ToolkitProvider.
• Render ExportCSVButton with csvProps. The position of ExportCSVButton is depends on you.

import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';

const { ExportCSVButton } = CSVExport;

<ToolkitProvider
  keyField="id"
  data={ products }
  columns={ columns }
  exportCSV
>
  {
    props => (
      <div>
        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
        <hr />
        <BootstrapTable { ...props.baseProps } />
      </div>
    )
  }
</ToolkitProvider>

Export CSV Options

fileName - [String]

Custom the csv file name.

separator - [String]

Custom the csv file separator.

ignoreHeader - [bool]

Default is false. Give true to avoid to attach the csv header.

noAutoBOM - [bool]

Default is true.

exportAll - [bool]

Default is true. false will only export current data which display on table.