Controlled Pagination and Selection in react table v8
I'm trying to combine these two examples:
- https://tanstack.com/table/v8/docs/examples/react/pagination-controlled
- https://tanstack.com/table/v8/docs/examples/react/row-selection
I've done pretty much a copy-paste job to implement the combined feature. I'm seeing that the state stored in
rowSelection state from the row-selection example is only keeping track of the current page's selections. When I go from page 1 to page 2, the selections on page 1 are still there.
It's not clear from the docs why this is the case. Does anyone have a hint about how to get react-table to keep track of selections on a per-page basis even when the data is 'controlled'?React Table Pagination Controlled Example | TanStack Table Docs
An example showing how to implement Pagination Controlled in React Table
4 Replies
extended-salmonOP•3y ago
I may have figured out an answer to my own question --
Since 'fully controlled' appears to mean I'm handling every aspect of pagination myself, I'll also need to tell my state handler about how to properly index each page's results in the
rowSelection state
This adds up to a lot of additional work to inform the user about state that's still around but that they can no longer see -- and if data updates, it's not obvious how to transfer previous state to new state in a way that retains identity of what's been selected and doesn't just keep the position in the list of what was selected.
what I want now is some transparency in the onRowSelectionChange handler -- i want to be able to consume the change inputs myself so I can do the manipulations i need to do, but I don't see how to get at them yet.
Thoughts, anyone?extended-salmonOP•3y ago
Aha, this has been extensively covered in github
https://github.com/TanStack/table/discussions/4444
https://github.com/TanStack/table/discussions/2661
GitHub
Controlled row selection not clearing · Discussion #4444 · TanStack...
Hi there, I'm trying to build a component with React Table with a controlled selected row state. I found a Code Sandbox that provides an example here: https://codesandbox.io/s/tannerlinsley...
GitHub
Row selection with controlled pagination · Discussion #2661 · TanSt...
Hi, I have a table with controlled pagination from server and row selection. If a try to set autoResetSelectedRows: true as table option, when I select rows in a page => request a new page =...
extended-salmonOP•3y ago
yes!
i needed this: where
row.key is the unique id for a row, what you'd use as key in a render
this makes it so that react-table's internal handlers do the right thing - they don't confuse previous/current page selections and they remember the identity of the selection even if the underlying data changes. awesome! thanks everyone