react-bootstrap-table

It's a react.js table for bootstrap, named reactbsTable. It's a configurable, functional table component and make you build a Bootstrap Table more efficiency and easy in your React application, However react-bootstrap-table support these features:

• column align
• column hidden
• scrolling table
• data sort
• cell format
• pagination
• row selection
• column filter
• cell edit with multi type editor
• insert & delete Row
• row and column style customize
• search
• export CSV file
• rich function hooks
• large columns table

You can see more about this component on here. and example is on here. See CHANGELOG for more detail release notes.

Development

react-bootstrap-table dependencies on react 0.14.x and Bootstrap 3 written by ES6 and use gulp and browserify for building and bundling.

You can use the following commands to prepare development

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install

Use gulp to build the react-bootstrap-table

$ gulp dev  #for development
$ gulp example-server #see all examples, go to localhost:3004
$ gulp prod #for production

Usage

Install

npm install react-bootstrap-table --save

Import Module

Use react-bootstrap-table in your react app, you should import this component as first. About importing this component, there'r two way in the following you can choose:

Module(CommonJS/AMD)

import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';  // in ECMAScript 6
// or in ECMAScript 5
var ReactBSTable = require("react-bootstrap-table");  
var BootstrapTable = ReactBSTable.BootstrapTable;
var TableHeaderColumn = ReactBSTable.TableHeaderColumn;

Browser global(window object)

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

Import CSS

Finally, you need to import the css file to your app, there are two css file you can choose.
react-bootstrap-table-all.min.css include toastr.
react-bootstrap-table.min.css doesn't include toastr.
Notes: react-bootstrap-table use toastr to alarm some message to user.

<link rel="stylesheet" href="./css/react-bootstrap-table-all.min.css">

CSS files you can find in the css folder.

Quick Demo

// products will be presented by react-bootstrap-table
var products = [{
      id: 1,
      name: "Item name 1",
      price: 100
  },{
      id: 2,
      name: "Item name 2",
      price: 100
  },........];
// It's a data format example.
function priceFormatter(cell, row){
  return '<i class="glyphicon glyphicon-usd"></i> ' + cell;
}

React.render(
  <BootstrapTable data={products} striped={true} hover={true}>
      <TableHeaderColumn dataField="id" isKey={true} dataAlign="center" dataSort={true}>Product ID</TableHeaderColumn>
      <TableHeaderColumn dataField="name" dataSort={true}>Product Name</TableHeaderColumn>
      <TableHeaderColumn dataField="price" dataFormat={priceFormatter}>Product Price</TableHeaderColumn>
  </BootstrapTable>,
    document.getElementById("app")
);

See react-bootstrap-table examples

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install
$ gulp example-server #after start, open browser and go to http://localhost:3004

Documents

You can reference here on web site

The attributes on <BootstrapTable>:

The attributes in <TableHeaderColumn>:

About TableDataSet

After v0.8.0, react-bootstrap-table provide the ability of updating table data on fly. How to do it?

• Import TableDataSet

var ReactBsTable  = require('react-bootstrap-table');
var TableDataSet = ReactBsTable.TableDataSet; //import TableDataSet

• Create a TableDataSet object with you data.

var dataSet = new TableDataSet(products);

• Pass this object to data

<BootstrapTable data={dataSet}>
   ...
</BootstrapTable>

• If you want to reset or update table data in any time, you can:

dataSet.setData(newproducts);

Todo List

1. Testing
2. Nested data
3. CSS tunning