AllenFang

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

AllenFang

class ProgrammaticallyRegexFilter extends React.Component {
  handleBtnClick = () => {
    this.refs.nameCol.applyFilter('[name]');
  }

  render() {
    return (
      <div>
        <button onClick={ this.handleBtnClick } className='btn btn-default'>Click to apply Regx filter</button>
        <BootstrapTable data={ products }>

AllenFang

const qualityType = {
  0: 'good',
  1: 'Bad',
  2: 'unknown'
};

function enumFormatter(cell, row, enumObject) {
  return enumObject[cell];
}

AllenFang

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

function enumFormatter(cell, row, enumObject) {
  return enumObject[cell];
}

AllenFang

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

function enumFormatter(cell, row, enumObject) {
  return enumObject[cell];
}

AllenFang

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

function enumFormatter(cell, row, enumObject) {
  return enumObject[cell];
}

AllenFang

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

AllenFang

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

AllenFang

class ProgrammaticallyNumberFilter extends React.Component {
  handleBtnClick = () => {
    this.refs.nameCol.applyFilter({
      number: 40,
      comparator: '>'
    });
  }

  render() {
    return (

AllenFang

const satisfaction = [ 0, 1, 2, 3, 4, 5 ];

class NumberOptionsFilter extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products }>
        <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
        <TableHeaderColumn dataField='satisfaction' filter={ { type: 'NumberFilter', options: satisfaction } }>Buyer Satisfaction</TableHeaderColumn>
      </BootstrapTable>