reactjspaginationreact-bootstrapreact-bootstrap-table

On change of table data, pagination is not resetting to the first page


On click of the button "Change Table data", the pagination is not resetting to the first page.
[React-bootstrap-table-next] [react-bootstrap-table2-paginator]

Steps to reproduce:

Please let me know the changes to reset the pagination to the first page whenever table data is changed.


Solution

  • Below is one workaround for this requirement and react-bootstrap-table2 documentation doesn't talk about this functionality.

    First, add a ref to the table like below.

       <BootstrapTable
           wrapperClasses="mapb9table responsive"
           bordered={false}
           keyField="id"
           data={this.state.data}
           columns={columns}
           ref={ n => this.node = n }
           pagination={paginationFactory(optionsPag)}
        />
    

    Then, add the below line in the onClick method of "Change table data".

      handleChangeOfTableData = () => {
         this.setState({ data: this.state.data });
         // This updates the pagination to the first page as required in this use-case.
         this.node.paginationContext.currPage= 1; 
      }
    

    Sandbox URL with implementation: https://codesandbox.io/s/pagination-b7m0y?file=/src/index.js