AllenFang

class SortHookTable extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      sortName: undefined,
      sortOrder: undefined
    };

    this.options = {

AllenFang

class DisableSortIndicatorTable extends React.Component {
  constructor(props) {
    super(props);

    this.options = {
      sortIndicator: false  // disable sort indicator
    };
  }

  render() {

AllenFang

function getCaret(direction) {
  if (direction === 'asc') {
    return (
      <span> up</span>
    );
  }
  if (direction === 'desc') {
    return (
      <span> down</span>
    );

AllenFang

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

class HtmlColumnFormatTable extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products }>
        <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>

AllenFang

class ActiveFormatter extends React.Component {
  render() {
    return (
      <input type='checkbox' checked={ this.props.active }/>
    );
  }
}

function activeFormatter(cell, row) {
  return (

AllenFang

const qualityType = {
  0: 'good',
  1: 'bad',
  2: 'unknown'
};
const inStockStatus = {
  1: 'yes',
  2: 'no'
};

AllenFang

class ActiveFormatter extends React.Component {
  render() {
    return (
      <input type='checkbox' checked={ this.props.active }/>
    );
  }
}

function activeFormatter(cell, row, enumObject, index) {
  console.log(`The row index: ${index}`);

AllenFang

class TextFilter extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products }>
        <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name' filter={ { type: 'TextFilter', delay: 1000 } }>Product Name</TableHeaderColumn>
        <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }

AllenFang

class TextFilterWithDefaultValue extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products }>
        <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name' filter={ { type: 'TextFilter', defaultValue: '0' } }>Product Name</TableHeaderColumn>
        <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }

AllenFang

class ProgrammaticallyTextFilter extends React.Component {

  /* There're two way that you can filter data */
  handleBtnClick = () => {
    this.refs.nameCol.applyFilter('Item name 3');
  }

  /* This is also work for filtering */
  handleBtnClick1 = () => {
    this.refs.table.handleFilterData({ name: 'Item name 3' });