react-bootstrap-table

Import Module

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

// 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;

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

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