Getting Started

Introduction

react-bootstrap-table2 support following features in react-bootstrap-table2-toolkit package:

• Export CSV
• Table Search
• Column Toggle

Installation

$ 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';

Usage

react-bootstrap-table2-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-table2-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:

• keyField
• data
• columns
• bootstrap4

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.