custom-search-panel-2.jsx

class MySearchPanel extends React.Component {

  cleanBtnClick = () => {
    this.refs.seachInput.value = '';
    this.props.search('');
  }

  seachBanana = () => {
    this.refs.seachInput.value = 'banana';
    this.props.search('banana');
  }

  render() {
    return (
      <div className='input-group'>
        <span className='input-group-btn'>
          <button
            className='btn btn-default'
            type='button'
            onClick={ this.cleanBtnClick }>
            Clean
          </button>
          <button
            className='btn btn-default'
            type='button'
            onClick={ this.seachBanana }>
            Banana
          </button>
        </span>
        <input
          ref='seachInput'
          className='form-control'
          type='text'
          disabled
          defaultValue={ this.props.defaultValue }
          placeholder={ this.props.placeholder }/>
      </div>
    );
  }
}

class CustomSearchFieldTable2 extends React.Component {

  render() {
    const options = {
      clearSearch: true,
      searchPanel: (props) => (<MySearchPanel { ...props }/>)
    };
    return (
      <BootstrapTable data={ products } options={ options } search>
        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
        <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}