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
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.