custom-search-panel-1.jsx

class MySearchPanel extends React.Component {
  render() {
    return (
      <div>
        <div className='input-group'>
          <span className='input-group-btn'>
            <button
              className='btn btn-primary'
              type='button'>
              CustomButton1
            </button>
            { this.props.clearBtn }
          </span>
        </div>
        { this.props.searchField }
      </div>
    );
  }
}

class CustomSearchFieldTable1 extends React.Component {

  renderCustomClearSearch = (onClick) => {
    return (
      <button
        className='btn btn-success'
        onClick={ onClick }>
        Empty
      </button>
    );
  }

  render() {
    const options = {
      clearSearch: true,
      clearSearchBtn: this.renderCustomClearSearch,
      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>
    );
  }
}