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.
Check the 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

a.Install

npm install react-bootstrap-table --save

b.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/>

c.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

The example source codes is in the examples folder. Run the following commands for a live demo.

$ 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

Documentation

Please see: docs

Thanks

luqin
Help this project to integrate a better examples demo, add travis & badge, code formatting, give a lot of suggestions and bugs report.
khinlatt
Contribute export csv, multi-search and bug fixing.
dana
Contribute a new colum-filter design and great feedback given.
tbaeg
Bugs report and give some bootstrap and css suggestions actively.
bluedarker
Contribute the edit format & validation on cell editing and row insertion. Improve the custom styling.
Sofia Silva
Bug reports and fixing actively.
frontsideair
Fixing bugs and give improvement for functionality.
aaronhayes
Bugs report and enhance the cell formatting.
Reggino
Implement the TableDataSet component.