custom-pagination-panel.jsx

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

  renderPaginationPanel = (props) => {
    return (
      <div>
        <div>{ props.components.pageList }</div>
        <div>
          <span>Change size per page: </span>
          { props.components.sizePerPageDropdown }
        </div>
        <div>
          <button onClick={ () => props.changeSizePerPage(25) } className='btn btn-default'>Click to force size per page as 25</button>
          <button onClick={ () => props.toggleDropDown() } className='btn btn-default'>Click to force toggle dropdown</button>
          <button onClick={ () => props.changePage(3) } className='btn btn-default'>Jump to page 3</button>
        </div>
      </div>
    );
  }

  render() {
    const options = {
      paginationPanel: this.renderPaginationPanel
    };
    return (
      <div>
        <BootstrapTable
          data={ products }
          options={ options }
          pagination>
          <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}