React table - force reset page index in manual pagination

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

it keeps showing me all 30 entries in 1 page like pagination is not working at all — Apostolos, Aug 05 '20 at 17:10
yea in the manual mode you should handle everything manually, in real case I load 10 columns only then when you move to second page I load the other 10 (if 10 is the page size ) — Mina Fawzy, Aug 05 '20 at 17:54

score 4 · Accepted Answer · answered Aug 05 '20 at 17:32

4

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.

answered Aug 05 '20 at 17:32

Apostolos

10,033
5
24
39

thanks again but what if I need both PageJump and pagination – Mina Fawzy Aug 06 '20 at 01:48
it wont work because it uses inner state page property whereas if false, it takes the page from component properties. check this https://github.com/tannerlinsley/react-table/blob/v6/src/pagination.js at line 116. – Apostolos Aug 06 '20 at 05:10
1

this is a great way on how to handle the pagination manually. I just realised one small flaw when i was trying it which is that when you change the number of rows in the rows select list at the bottom, it won't change because the pageSize is static on 10 rows only. to fix that you need to add an ```onPageSizeChange``` attribute to the table component in your App.js like the following: ```onPageSizeChange={(newPageSize, newPage) => { this.setState((prev) =>( {...prev, pageSize: newPageSize, pages: Math.ceil(prev.data.length / pageSize) })); }}``` – Safi Habhab Nov 07 '22 at 23:50

React table - force reset page index in manual pagination

1 Answers1