table icon indicating copy to clipboard operation
table copied to clipboard

Manually deselecting a row that has been hidden via globalFilter throws an error

Open JoshWhiteTTD opened this issue 2 years ago • 5 comments

Describe the bug

I am trying to manually deselect a row from another part of the UI. In my repro below, this is a button with the following handler. Please note, I have mapped each row's index to an id property during makeData

  const deselect1 = () => {
    const row = table.getSelectedRowModel().rows.find((row) => {
      return row.original.id === 0;
    });
    row?.toggleSelected();
  };

However, if that row is hidden via a global filter, when clicking the button I the following error:

Uncaught Error: getRow expected an ID, but got 0

Your minimal, reproducible example

https://codesandbox.io/p/devbox/eloquent-elbakyan-grtdjl?embed=1&file=%2Fsrc%2Fmain.tsx%3A64%2C43

Steps to reproduce

  1. Select the first row
  2. Filter such that the first row is not visible
  3. Click the "Deselect 1" button

Expected behavior

  • Row to be deselected (although this won't be immediately visible)
  • When filter is removed, row appears in it's new deselected state

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

OS: Windows Browser: Chrome Version: 119.0.6045.160 (Official Build) (64-bit)

react-table version

8.10.7

TypeScript version

4.9.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.

JoshWhiteTTD avatar Nov 28 '23 13:11 JoshWhiteTTD

I've just stumbled upon the same issue.

Have you been able to come up with a workaround? Perhaps using table.setRowSelection(...)?

EugenDueck avatar Jan 24 '24 05:01 EugenDueck

@JoshWhiteTTD I've tried table.setRowSelection(), and it works. I'm using row ids (via TableOptions.getRowId), so I'm not sure it works in the same way for you, but in your case you may try something like this:

table.setRowSelection(selection => {
  const { [row.original.id]: _, ...rest } = selection
  return rest
})

EugenDueck avatar Jan 24 '24 06:01 EugenDueck

@EugenDueck are you on the latest version? This was supposed to be fixed

KevinVandy avatar Jan 24 '24 06:01 KevinVandy

I'm on

 "@tanstack/react-table": "^8.10.7"

Do you have a link to the commit / pr that fixes this? Is it perhaps fixed by the fix for https://github.com/TanStack/table/issues/5119 ?

EugenDueck avatar Jan 24 '24 06:01 EugenDueck

@KevinVandy

I just tried with the latest version of react-table - 8.11.7 - and the error still gets thrown on row.toggleSelected(false) for a row hidden due to the global filter.

EugenDueck avatar Jan 24 '24 07:01 EugenDueck