react-bootstrap-table

Getting Started

How we started

npm install react-bootstrap-table --save

Import Module

There are two way you can import react-bootstrap-table to your project:

01. Import react-bootstrap-table in module(CommonJS/AMD)

// with es6
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
// with es5
var ReactBsTable = require('react-bootstrap-table');
var BootstrapTable = ReactBsTable.BootstrapTable;
var TableHeaderColumn = ReactBsTable.TableHeaderColumn;

02. Browser global(window object)

<script src="path/to/react-bootstrap-table/dist/react-bootstrap-table.min.js" />
<script>
  var ReactBsTable = window.BootstrapTable;
<script/>

However, we support the prebuilt verion of react-bootstrap-table hosted on npm CDN:

<script src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.js" />


Add CSS

You need to import the css file to your app, the css is under the dist folder


// with es5
require('node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css');
// with es6
import 'node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css';

Like JS, you can also get the prebuilt version

<link rel="stylesheet" href="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table-all.min.css">
</link>

Create a react-bootstrap-table in your app

// with es5
var React = require('react');
var ReactDOM = require('react-dom');
var ReactBsTable  = require('react-bootstrap-table');
var BootstrapTable = ReactBsTable.BootstrapTable;
var TableHeaderColumn = ReactBsTable.TableHeaderColumn;

var products = [{
      id: 1,
      name: "Product1",
      price: 120
  }, {
      id: 2,
      name: "Product2",
      price: 80
  }...];

ReactDOM.render(
  <BootstrapTable data={products} striped hover>
      <TableHeaderColumn isKey dataField='id'>Product ID</TableHeaderColumn>
      <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
      <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
  </BootstrapTable>,
  document.getElementById('basic')
);

Integrate with Bootstrap4

After v4.0.0, react-bootstrap-table start to support Bootstrap 4 and also compaitable with bootstrap 3. If your application use Bootstrap 4, please remember to add version='4' on BootstrapTable. This props will make some components to compaitable with bootstrap 4 style.
ReactDOM.render(
  <BootstrapTable data={products} version='4'>
      <TableHeaderColumn isKey dataField='id'>Product ID</TableHeaderColumn>
      <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
      <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
  </BootstrapTable>,
  document.getElementById('basic')
);

Get More Examples

Please check examples folder on Github