[React] Row selection does not reset after upgrading from v7 to v8

[kabomi]

Describe the bug

Hello,

first, thank you for your awesome job, v8 is by far better than v7, I appreciate all the effort you put on it. I'm pointing this issue as a Bug because I couldn't find any information on the documentation about it, so if it is not a bug, my apologies.

In v7, there was the option autoResetSelectedRows that (it was set by default to true) resets the selected rows whenever the data changes. In v8, this option is not there anymore and the default behaviour is exactly the opposite.

I would like to know, first, if that was intended, second, if there are plans to restore the configuration option autoResetSelectedRows and when?

A reproducible repo could be found on your documentation pages: https://2llvty.sse.codesandbox.io

Your minimal, reproducible example

https://2llvty.sse.codesandbox.io

Steps to reproduce

Open https://2llvty.sse.codesandbox.io

Select the first 2 rows (checkbox)

Press on refresh data (button) at the bottom

Result: Data is refreshed and the rows remain selected, even though data did change.

Expected behavior

After data was refreshed, the selection should have been reset, same as it was in v7.

Or there is an option like autoResetSelectedRows that I could set in order to obtain the same behaviour as in v7.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• Os: [macOS] - Browser: [Chrome, Firefox]

react-table version

"@tanstack/react-table": "^8.5.22",

TypeScript version

v4.7.3

Additional context

No response

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] 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.

[aniallator8]

https://tanstack.com/table/v8/docs/api/features/row-selection#toggleallrowsselected This should be the call you're looking for.

As part of your button click handler:

onClick={() =>
  table.toggleAllRowsSelected(false)
}

Hope this helps.

[Luisdv93]

Is there a better approach for this? In my case I have a mutation that is fired on a modal that's outside the useReactTable hook scope. So I was hoping there was an easier way to achieve this.

[lucapollani]

I'd like autoResetSelectedRows option back too.

[lucapollani]

https://tanstack.com/table/v8/docs/api/features/row-selection#toggleallrowsselected This should be the call you're looking for.

As part of your button click handler:

onClick={() =>
  table.toggleAllRowsSelected(false)
}

Hope this helps.

@aniallator8 I don't know if there are some practical differences but maybe also table.resetRowSelection(true); can be used in this case?

[rgascons]

Is there a better approach for this? In my case I have a mutation that is fired on a modal that's outside the useReactTable hook scope. So I was hoping there was an easier way to achieve this.

I have your exact same use-case, and I'm resorting to a useEffect inside my table component... Did you find a good solution to this?

[aniallator8]

In order to help for your specific use case it would be great if you can provide a sandbox. However, in general there are potentially a few misunderstandings about what Tanstack table is capable of as a Headless UI library.

In the case of having a Modal component, external to the context of your table, you'll first need to:

• Manage the relevant state (like the selected checkbox state).
• Move the relevant state up in your React tree where necessary.

You can do this by providing the correct props when you define your table instance with useReactTable. This overrides the default behaviour where the table would manage the state internally. Reference: https://tanstack.com/table/v8/docs/api/features/row-selection#onrowselectionchange

Here's a sandbox with a slightly modified version of the Row Selection example from the docs. https://stackblitz.com/edit/tanstack-table-mcopnb?file=src%2Fmain.tsx There's a standalone button above the table that will reset the checkbox state.

[JSmith989]

I think your situation is slightly different than mine but I think similar enough that I feel like I should share a solution that helped me.

I'm using redux to save the state of my table and when I would paginate, filter, or sort, my selected rows would stay at the same index even when the data shifts because the rowSelection object in the table state defaults to using the index of however many rows there are.

I added this to use a more unique identifier so that when I paginate, filter, or sort, my selected rows will remain correct as they shift around

getRowId: (row) => row.id,