test-table.js

import React from 'react';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';

var products = [];

function addProducts(quantity) {
  var startId = products.length;
  for (var i = 0; i < quantity; i++) {
    var id = startId + i;
    products.push({
      id: id,
      name: "Item name " + id,
      price: 100 + i,
      supplierId: id+2,
      discount: "10%",
      categoryId: "catorage-"+id+6
    });
  }
}

addProducts(70);

function onRowSelect(row, isSelected){
  console.log(row);
  console.log("selected: " + isSelected)
}

var selectRowProp = {
  clickToSelect: true,
  mode: "checkbox",
  bgColor: "rgb(163, 210, 216)",
  onSelect: onRowSelect
};

var options = {
  sortName: 'id',
  sortOrder: 'desc'
};

function supplierFormatter(cell, row) {
  if(cell > 90) return cell + 20;
  else return cell-10;
}

function priceFormatter(cell, row){
  return '<i class="glyphicon glyphicon-usd"></i> ' + cell;
}


React.render(
  <BootstrapTable data={products} striped={true} hover={true} pagination={true} selectRow={selectRowProp} options={options}>
      <TableHeaderColumn dataField="id" dataAlign="center" dataSort={true} isKey={true}>Product ID</TableHeaderColumn>
      <TableHeaderColumn dataField="name" width="200px" dataSort={true}>Product Name</TableHeaderColumn>
      <TableHeaderColumn dataField="price" width="100px" dataSort={true} dataFormat={priceFormatter} >Product Price</TableHeaderColumn>
      <TableHeaderColumn dataField="supplierId" dataSort={true} dataFormat={supplierFormatter}>Supplier ID</TableHeaderColumn>
      <TableHeaderColumn dataField="discount" dataSort={true}>Discount(Percentage)</TableHeaderColumn>
      <TableHeaderColumn dataAlign="center" dataField="categoryId" dataSort={true}>Category ID</TableHeaderColumn>
  </BootstrapTable>,
	document.getElementById("basic")
);