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

Question

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:

• Add a button called "Change table data" which changes the table data.
• Change the pagination to some other page like 2.
• Then, click on "Change table data" which changes the table data but, still the new table data will be rendered as per the second page only. Pagination will not reset to the first page.

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

Answer 1

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