React table - 在手动分页中强制重置页面索引

Question

I face issue on resetting page index manually

I handle change in data manually from onPageChange , onPageSizeChange ... etc

when I change page index with onPageChange I stored in high-level component and pass again ReactTable as prop called currentPage in same cases I need to reset currentPage to be 0, but the dosent works so I added componentDidUpdate callback to force reset page index

ReactTable version 6.11.5

componentDidUpdate(prevProps, prevState) {
    const reactTable = this.myRef.current;
    const { currentPage } = this.props;
    if (reactTable && currentPage !== reactTable.state.page) {
      reactTable.state.page = currentPage;
      reactTable.getResolvedState().page = currentPage;
    }
  }

render() {
    const {
      data,
      loading,
      totalNumberOfPages,
      currentPage,
      onPageChange,
      pageSize,
      onPageSizeChange,
      onFilteredChange,
      onSortedChange,
      filtered,
    } = this.props;
 return (<ReactTable
            ref={this.myRef}
            filtered={filtered}
            onFilteredChange={(filtered) => {
              onFilteredChange(filtered);
              this.setState({ filtered });
            }}
            manual
            sorted={tableSorted}
            onSortedChange={(sorted) => onSortedChange(sorted)}
            filterable
            loading={loading && !silentUpdate}
            pages={totalNumberOfPages}
            page={currentPage}
            onPageChange={onPageChange}
            defaultPageSize={pageSize}
            pageSize={pageSize}
            onPageSizeChange={onPageSizeChange}
            loadingText="Loading..."
            data={data}
            columns={columns}
            className="-striped -highlight"
        />)

CodeSandbox

https://codesandbox.io/s/set-initial-page-number-in-react-table-jthci?file=/App.js

if you are in page 3 and press "Reset Page", it should be in the first page

Answer 1

I created a small codesandbox problem to show you that it is working. Check this link

https://codesandbox.io/s/set-initial-page-number-in-react-table-mumef

So, by reading the source code of react-table , I saw that the component used for pagination is called ReactTablePagination

This component has the following line

{showPageJump ? renderPageJump(this.getPageJumpProperties()) : renderCurrentPage(page)}{' '}

which means that in order for the page index to be updated, this property showPageJump should be set to false .

I tried without setting at all this property and it was not working. When i set it to false, it worked.