react-bootstrap-table

It's a react table for bootstrap, named reactbsTable

As you know, the basic bootstrap table function like striped, bordered, hover and condensed are supported.

In addition, reactbsTable 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 the home page. and example is on here.

Development

react-bootstrap-table dependencies on react 0.13.x and Bootstrap 3 written by ES6 and use gulp and browserify to build

Use following command to prepare development

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

Use gulp to build the react-bootstrap-table

$ gulp dev  #for development
$ 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 can import react-bootstrap-table in two way, as following:

module(CommonJS/AMD)

import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';  // in ECMAScript 6
// or
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 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 reactbsTable, use it in your react app

You can find more detail example code in example folder

// products will be presented by reactbsTable
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
  },{
      id: 6,
      name: "Item name 6",
      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} height="120" 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("basic")
);

See react-bootstrap-table examples

$ git clone https:/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

API&Attribute

You can reference here on web site

####The attributes in <BootstrapTable>:
Use data to specify the data that you want to display on table.
Use height to set the table height, default is 100%.
Use striped to set table be a striped columns. Like bootstrap table class .table-striped.
Use hover to enable table hover. Like bootstrap table class .table-hover.
Use condensed to set a condensed table. Like bootstrap table class .table-condensed.
Use pagination to enable the pagnation on table.
Use insertRow to enable the insert row on table.
Use deleteRow to enable the delete row on table.
Use columnFilter to enable the column filter on table.
Use search to enable the search on table.
Use searchPlaceholder to change the placeholder text in the search field.
Use trClassName to set tr row class,accept string or function. if use function,will pass rowData and rowIndex params.
Use selectRow to enable the row selection on table, this attribute accept an object which contain these properties.

• 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.
  
• hideSelectColumn(optional): if true, the radio/checkbox column will be hidden, if you enable clickToSelect.
  
• 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.
  
• onSelectAll(optional): accept a callback function, if select all in checkbox mode, this function will be called.
  

Use cellEdit to enable the cell editing on table, it accept a object which 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.
  

Use options to set other settings for react-bootstrap-table, this prop accept an object which include these 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>:
Use isKey to specify which column is unique.
Use width to set the width on column
Use dataField to specify which column you want to show on this column.
Use dataAlign to set align in column. Available value is left, center, right, start and end.
Use dataSort to enable the sorting in column. Default value is false(disabled).
Use dataFormat to customize this column.Must give it as a function.
Use hidden to enable hidden column.
Use className to add custom css class for table header column,accept string or function. if use function,will pass cellData,rowData,rowIndex,columnIndex for params
Use columnClassName to add custom css class for table body column, accept string or function. If use function will pass fieldValue,row,rowIdx,colIdx
Use editable to specify column editable,accept boolean or input type string or config object or function, default is true. This attribute only works on cellEdit be setted in certainly. if use function,will pass cellData,rowData,rowIndex,columnIndex for params, and expect return the config object or input type string
editable config object include these properties:

• type (required): indicate input type. support type is:select,textarea,text and password...
• style (optional):input style,react foramt
• className (optional):input class
• datas (required): only required on type is select, array of data for option in select
• cols (optional):only use on type is textarea, number for textarea cols
• rows (optional):only use on type is textarea, number for textarea rows

Use sortFunc to customize your sort function.

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