React-Table Hooks - pageIndex reset when changing page

Question

I am implementing a react-table component containing server-side pagination and I need sorting on the columns as well.

However I am observing strange behaviors. When I am using only pagination and click on next page the pageIndex is getting incremented.

However when I add sorting hooks then then pagination in not working. The pageIndex is getting back to 1 automatically and I am not able to figure it why.

Can any one help me out. Below is sandbox link https://codesandbox.io/s/eager-breeze-9cw0r.

Answer 1

When making changes to the external data you want to disable automatic resets to the state of the table (see https://github.com/TanStack/table/blob/main/docs/faq.md for more info). So in your case changing the page modifies the data you're passing to the table, which leads to the state of the table being reset.

In order to stop this you need to set autoResetPage to false. Eg:

useTable<FormattedRowData<T>>(
    {
      autoResetPage: false
    });

I made the change to your sandbox and this resolved the issue.