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

You can see more about this component on here. and example is on here.

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/example-list.html
$ gulp prod #for production

Usage

Download react-bootstrap-table first.

npm install react-bootstrap-table --save

Use react-bootstrap-table in your react app, you should import react-bootstrap-table 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/>

Finally, you need to import the css file to your app

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

The react-bootstrap-table.min.css file you can find in the css folder.After import css file, you can start to write your react application with react-bootstrap-table. In the below, it's a simple demo for using react-bootstrap-table:

// 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
  },{
      id: 3,
      name: "Item name 3",
      price: 110
  },{
      id: 4,
      name: "Item name 4",
      price: 100
  },{
      id: 5,
      name: "Item name 5",
      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/example-list.html

Documents

You can reference here on web site

The attributes on <BootstrapTable>:

Attr	Type	Description
data	Array	Assign the data you want to display on table.
height	String	Set the height of table, default is 100%.
bordered	Bool	Default is true, if false, become a borderless table
striped	Bool	Same as Bootstrap table class .table-striped, default is false.
hover	Bool	Same as Bootstrap table class .table-hover, default is false.
condensed	Bool	Same as Bootstrap table class .table-condensed, default is false.
columnFilter	Bool	Set true to enable the column filter on table.
pagination	Bool	Set true to enable pagination on table .
insertRow	Bool	Set true to enable row insertion on table.
deleteRow	Bool	Set true to enable row deletion on table.
search	Bool	Set true to enable search function on table.
searchPlaceholder	String	The place holder on search text fields
trClassName	String or Function	Assign the row(tr) class, accept string or function, if use function, will pass rowData and rowIndex params and should return string presented class. for examples: function trClassFormat(rowData,rowIndex){    return rowIndex%2==0?"tr-odd":"tr-even"; }
selectRow	Object	Assign an object which have these properties as follow: mode(required): radio/checkbox, to specify the selection is single or multiple. clickToSelect(optional): if true, click on row will trigger row selection, default is false. clickToSelectAndEditCell(optional): if true, click the row will trigger selection on that row, and also trigger cell editing if you enabled cell edit. bgColor(optional): You can assign background color if row be selected. selected(optional): it's for default selected row on table, give an array object which contain selected row keys. onSelect(optional): accept a callback function, if a row be selected, this function will be called and pass the row and isSelected as params. onSelectAll(optional): accept a callback function, if select all in checkbox mode, this function will be called and pass isSelected and currentSelectedAndDisplayData as params. hideSelectColumn(optional): if true, the radio/checkbox column will be hidden, if you enable clickToSelect.
cellEdit	Object	Use cellEdit and assign an object to enable cell edit on table, this object contain these properties: mode(required): click/dbclick, to spectify which condition will trigger cell editing. blurToSave(optional): if true, when mouse blur on input field will trigger a save on cell, default is false. afterSaveCell(optional): accept a callback function, after save cell, this function will be called and pass row, cellName and cellValue as params.
options	Object	For some options setting on react-bootstrap-table, you can set the options attribute and give an object which contain the following properties sortName: Assign a default sort field by this property sortOrder(asc/desc): Assign a default sort order afterTableComplete: Assign a callback function which will be called after table update afterDeleteRow: Assign a callback function which will be called after row delete afterInsertRow: Assign a callback function which will be called after row insert page: accept a number, which means the page you want to show as default sizePerPageList: you can change the dropdown list for size per page, accept an array object. sizePerPage: means size per page you want to locate as default, accept a number. paginationSize: define the pagination bar size, accept a number.

The attributes in <TableHeaderColumn>:

Attr	Type	Description
isKey	Bool	To specify which column is unique, it's required.
width	String	Set the column width, ex: 70%, 150px.
dataField	String	Means which field of data you want to show on column.
dataAlign	String	Set align in column, value is left, center, right, start and end.
dataSort	Bool	True to enable table sorting.
dataFormat	Function	To customize the column. Must give it as a function and pass cell, row as params. This function should return a String or a React Component
hidden	Bool	True to hide column.
className	String or Function	Add custom css class on table header column, this attribute accept String or Function. If Function, will pass following data as parameters: cellData,rowData,rowIndex,columnIndex. And this function should return a String which means the class you want to add.
columnClassName	String or Function	Add custom css class for table body column, this attribute accept string or function. If Function, will pass following data as parameters: fieldValue,row,rowIdx,colIdx. And this function should return a String which means the class you want to add.
editable	Bool or Object	True to set column editable, false is non-editable. If give Object, you can get more customization when editing cell, which object contain these properties: {   type: //edit type, avaiable value is textarea, select, checkbox   validator: //give function for validation and pass cell value as param. This function should return Bool.   options:{     values:     //values means data in select or checkbox     //if checkbox, use : to separate value, ex: Y:N   } }
sortFunc	Function	Give a customize function for data sorting

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