manualPagination and rowSelection: row remains selected after paging

[mikebridge]

Describe the bug

I have a table which has manualSelection=true set so that I can do server-side pagination, and it also uses the rowSelection feature to select rows. If I select a row on one page, then change pages, the same row stays selected, even though it is on a different page.

Your minimal, reproducible example

https://codesandbox.io/s/sharp-robinson-32uzql

Steps to reproduce

1. select an element
2. change pages
3. verify that the row selection has not changed.

Expected behavior

I would expect the original row to remain selected, but only on the page where it is visible. I would expect rows which I had not selected to remain unselected.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Linux

react-table version

v.8.5.15

TypeScript version

v4.7.3

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[mikebridge]

I found the issue. I need to set a getRowId callback in the useReactTable hook, and then ensure that the rowId uniquely identifies that row:

https://tanstack.com/table/v8/docs/api/core/table#getrowid

Something like:

const getRowId = (originalRow) => originalRow.id.toString();

const table = useReactTable({
  // ...
  getRowId
});