AllenFang

function enumFormatter(cell, row, enumObject) {
  return enumObject[cell];
}
class SelectFilter extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products }>
        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
        <TableHeaderColumn dataField='quality' filterFormatted dataFormat={ enumFormatter } formatExtraData={ qualityType }

AllenFang

class SelectFilterWithCondition extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products }>
        <TableHeaderColumn dataField='id'>Product ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
        <TableHeaderColumn dataField='quality' filter={ { type: 'SelectFilter', options: qualityType, condition: 'eq' } }>Product Quality</TableHeaderColumn>
      </BootstrapTable>
    );
  }

AllenFang

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

AllenFang

class ColumnStyleTable extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products }>
          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name' tdStyle={ { whiteSpace: 'normal' } }>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price' thStyle={ { 'fontWeight': 'lighter' } }>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }

AllenFang

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

    this.state = {
      sortName: [],
      sortOrder: []
    };
    this.onSortChange = this.onSortChange.bind(this);
    this.cleanSort = this.cleanSort.bind(this);

AllenFang

class MultiSortTable extends React.Component {
  render() {
    return (
      <div>
        <BootstrapTable ref='table' data={ products } multiColumnSort={ 2 }>
            <TableHeaderColumn dataField='id' isKey={ true } dataSort={ true }>Product ID</TableHeaderColumn>
            <TableHeaderColumn dataField='name' dataSort={ true }>Product Name</TableHeaderColumn>
            <TableHeaderColumn dataField='price' dataSort={ true }>Product Price</TableHeaderColumn>
        </BootstrapTable>
      </div>

AllenFang

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

  renderPaginationPanel = (props) => {
    return (
      <div>
        <div>{ props.components.pageList }</div>
        <div>

AllenFang

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

  onToggleDropDown = (toggleDropDown) => {
    // do your stuff here
    console.log('toggle dropdown');
    toggleDropDown();
  }

AllenFang

class LeftSearchPanel extends React.Component {

  render() {
    const options = {
      searchPosition: 'left'  // right or left
    };
    return (
      <BootstrapTable data={ products }
        options={ options }
        search>

AllenFang

class CustomToolBarTable extends React.Component {

  createCustomToolBar = props => {
    return (
      <div style={ { margin: '15px' } }>
        { props.components.btnGroup }
        <div className='col-xs-8 col-sm-4 col-md-4 col-lg-2'>
          { props.components.searchPanel }
        </div>
      </div>