How to fix pagination reset issue in react-table? - reactjs

Question

I am working for a feature where i have to apply a filter outside the component which is using react-table, but the current page number doesn't get reset after the filter is being applied. The result being fetched (have applied server-side pagination) shows the first page's data.
I have tried to use the callback onFetchData to change the current page number but it does'nt get triggered when the filter from outside the component is applied.
render() {
const { orders, onUpdate } = this.props;
const defaultPageSize = 50;
return (
<div className="admin-report-table">
<ReactTable
data={orders.ordersData}
columns={this.columns}
pages={Math.ceil(orders.count / defaultPageSize)}
defaultPageSize={defaultPageSize}
multiSort={false}
showPageSizeOptions={false}
showPaginationTop
className="-striped -highlight"
noDataText="No orders found. Please check your connection or change your filters."
filterable
manual // informs React Table that you'll be handling sorting and pagination server-side
onFetchData={(state) => {
const { page, pageSize, filtered, sorted } = state;
const adjustedPage = page + 1; // since library page starts from 0
onUpdate({
page: adjustedPage,
filtered,
pageSize,
sorted,
});
}}
/>
</div>
);
}
The Page number should be reset to 1 e.g. current display is Page 2 of 3, after the filter from outside the table is applied, the result is fetched and shown but the Page 2 of 3 doesn't change while the result in the table is of page 1.

Answer 1

Set autoResetPage: false
https://react-table.tanstack.com/docs/api/usePagination#table-options
its gonna avoid rendering all the time.

Answer 2

I had the same issue in my react table, in the solution for that, in the componentWillReceiveProps method I update the page props of the react-table and set it to the "0" when react-table gets new filtered data (Props changed ), its work for me fine, so in your code just set page props as 0 when your table get new data from the parent
componentWillReceiveProps(nextProps: Readonly<IProps>): void {
if (nextProps.properties !== this.props.properties && nextProps.properties.length > 0) {
this.setState({
selectedPageNumber : 0
})
}
}

Answer 3

This issue could be solved by the hacky solution found here: TroyWolf's solution.
And read the whole post there - it may be that your current case is in another comment. If the post will be removed somehow I post it here:
store a reference to the ReactTable's instance. It works to directly update myReactTableInstance.state.page = 0

Answer 4

With similar use cases, I have found its best to use once's own controlled page state for index, as mentioned here:
Check here as mentioned in the docs
It becomes simpler to handle the page reset actions on custom filtering/custom sorting, and trigger accordingly

Answer 5

I am using react table's out of the box pagination and the issue I had was how to extract the current pageIndex from react table. Because every time there was an action on the row of React table, that did not alter the no. of rows, the React table would go back to page 0.
Following worked for me, hacky but works -
On parent component calling React table -
signalTableData is where I have my data for columns and datarows. this could be your data.
const [pageIndex, setPageIndex] = useState(0);
<ReactTable
columns={signalTableData ? signalTableData.headerRow : <div>Loading...</div>}
data={signalTableData.dataRows ? signalTableData.dataRows : <div>Loading...</div>}
sortbyCollumn='originDate'
desc={true}
pageIndex = {pageIndex}
setPageIndex = {setPageIndex}
/>
One React Table js -
function Table({ columns, data, sortbyCollumn, desc, pageIndex, setPageIndex }) {...
and
useTable(
{
columns,
data,
defaultColumn, // Be sure to pass the defaultColumn option
filterTypes,
autoResetPage: false,
initialState: {
pageSize: 5,
pageIndex: pageIndex,
sortBy: [
{
id: sortbyCollumn,
desc: desc
}
] },
},