[solved][v8] pagination is driving me crazy
Hello,
I'm using react-table v8.5.22 trying to develop a custom design system table component with optional features depending on passed props.
My goal is to implement a main table component and a dedicated pagination component, controlling the main table pagination. One of the main pagination feature requested is to get/set url query params synched with the pagination state.
After some beginner's success, I developed other features (multiselect filtering, date range filtering, sorting...) but started to see unstable pagination behaviour. So I tried to fix it using multiple strategies:
- setting manual pagination (though not using server side pagination!): not a viable solution for client side integration
- passing the
useState updater setPagination to the Pagination component: no success
- passing the table object generated from useReactTable: still no success
- communicating the pagination state via url query params: not viable
- and other failed attempts...
The main bug I'm struggling with is that, for a reason I don't get, when setting a pagination state (i.e: {pageIndex: 1, pageSize: 10}) something resets the pageIndex state to 0 ({pageIndex: 0, pageSize: 10}). That is driving me nuts !!!
Of course I tried to deactivate any url query params change (=> no side effect because no useEffect).
I even tried to avoid using external Pagination component, conforming to the simplest example provided here: https://codesandbox.io/s/github/tanstack/table/tree/main/examples/react/pagination?from-embed=&file=/src/main.tsx
Fail again...
I don't get it.
Help.CodeSandbox
tanstack-table-example-pagination - CodeSandbox
tanstack-table-example-pagination using @faker-js/faker, @tanstack/react-table, react, react-dom
3 Replies
other-emeraldOP•3y ago
After reading into documentation for another feature I was lucky to find a table option to set that avoids the page index reset I was struggling with:
option.autoResetPageIndex => false
IT WORKS!!! 🥹
I strongly suggest to update Table API documentation to describe this option...correct-apricot•3y ago
That’s a great find.
Remember tho that this is all open source, so if you have some time, an update to the docs is welcomed. Just creat a PR with your changes. The world will thank you 🙏
quickest-silver•14mo ago
Hey @KevinVandy this also happens in mantine react table even with those options, is there another solution?