Server side pagination and sorting
Does anybody have an example of the react table with typescript which works with server side pagination, sorting and filtering? also i would like to know how to implement row selection with that server side pagination? do i need a state with selected row or checking the checkboxes per page can handle a react-table?
thank you for all the answers 🙂
5 Replies
correct-apricot•3y ago
Hi, I got the same problem before. Here is my suggestions:
1. Set those "manual" properties to true (e.g.
manualPagination for pagination, manualSorting for sorting and manualFiltering for filter
2. Capture the pagination, sorting and filtering state from react table
3. Fetch the data along with the above states whenever any state changes
For the row selection, the basic idea would be managing the row selection state ourselves. Given that the current rowSelection from react table is index-based, you will need to find a way to transform it into a id-based state / object-based state as your table data should be changed whenever page changing / filtering / sorting which makes index-based state invalid.
There is one more tricky thing you should be aware with: rowSelection state will be reset whenever your data is changed. It means you need to distinguish whether the state change is triggered by user action or table data updateeastern-cyan•3y ago
how to update the pageIndex like change the data? im using trpc. Any basic examples?
nvm found the controlled example
national-gold•3y ago
@razor Can you please post the example you've found. I'm also looking for same problem: server side pagination, sorting and filtering
eastern-cyan•3y ago
it's the controlled example in the docs for pagination section
other-emerald•2y ago
@Sujit Baniya think this is the link => https://tanstack.com/table/v8/docs/framework/react/examples/pagination-controlled
React Table Pagination Controlled Example | TanStack Table Docs
An example showing how to implement Pagination Controlled in React Table