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
  • Table Operation

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.
  • insertRow: Function (newRow: any) => void for handling row insertions.
  • deleteRow: Function (rowKeys: any[]) => void for handling row deletions.

Available children props​

ToolkitProvider will pass following props to the children:

  • 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.
  • opProps: props for table operation components (InsertRowButton, InsertModalToggle, DeleteRowButton).