Get selected row data outside of rows matching filter

[nuuou]

Example Sandbox (forked from the kitchen sink demo): https://codesandbox.io/s/react-table-selected-row-data-with-filters-e79c2

I'm having an issue fetching data from my rows when filters are applied.

Recreation (with above example):

1. Select an item on the first page
2. Filter (such as searching the first column)
3. Select an item
4. Notice that selectedRowIds is an aggregate of all selections (pre and post filter). However selectedFlatRows are only selected items matching the current filter.

In addition, calling toggleAllRowsSelected(false) while filtered only clears selections also matching the current filter (and items not within the current filter, but exist in selectedRowIds remain untouched). Noticed by clicking the "Clear Selections" button below the JSON too.

--

I need to be able to access data from selected rows, as well as clear the selections regardless of my current filters. However, it appears all data relating to rows (outside of the single selectedRowIds state value, are only applicable to currently applied filters.

Thoughts on how I might go about this? I can't tell if this is a bug in the library, I'm using the wrong methods, or if something that needs to be custom implemented.

Any help greatly appreciated!

[Buuntu]

Did you ever find an alternative solution? I am also frustrated by this, very similar discussion I started a few days ago: #2587

If people have found a solution it'd be a great to see a codesandbox in the docs. I haven't had luck using useControlledState either so am wondering what others are doing to handle filtering+selection.

[nuuou]

For my use-case, I ended up working through this. However, it's very hacky.

To get the data I needed, I was able to use a combination of preFilteredRows and selectedRowIds (getting the specific row from the Ids, since the selectedRowIds is accurate).

When clearing data, thankfully my feature also had it so I was simultaneously clearing all filters and all selected. To accomplish that, I simply ran:

setAllFilters([]);
setTimeout(() => {
  toggleAllRowsSelected(false);
 }, 10);

Again, that approach is extremely hacky (why the heck would a setTimeout in this context be good anyway), but it got me over this slump.

I too wish there was a better approach!

[Buuntu]

I see. Will give this a shot but am strongly considering writing my own table component at this point. Filtering/selecting together seems like pretty essential functionality and these issues/discussions don't seem to have much movement.