Pagination and Row Selection

[aepp]

Describe the bug

I've noticed differences in how selection of all rows is treated when using standard vs. server-side pagination.

As we see in the official example here: https://tanstack.com/table/v8/docs/examples/react/row-selection toggling "all rows selection" affects truly all rows in the table. The rows are present from the start, so we we don't need to define getRowId, everything is fine.

But when we use server-side pagination, we'd need to provide the getRowId since we can't rely on the raw row index since it resets for every page (I suppose that's the reason?). Otherwise we'll notice a side-effect like here https://github.com/TanStack/table/issues/4555 or https://github.com/TanStack/table/discussions/3619. However, with getRowId defined the table.getToggleAllRowsSelectedHandler() affects only rows on the current page (even though there is a special handler for that? This one table.getToggleAllPageRowsSelectedHandler?). Furthermore, the table.getIsAllRowsSelected() also returns true when just the entries on the current page are selected.

So I'm wandering, if this behaviour is intended, then why when using the "standard" pagination the table.getToggleAllRowsSelectedHandler() affects all pages (and with server-side pagination only the current page)? How can I achieve the same behaviour when using the server-side pagination?

I "created" a codesandbox by merging the two examples: https://tanstack.com/table/v8/docs/examples/react/row-selection and https://tanstack.com/table/v8/docs/examples/react/pagination-controlled

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/tanstack-table-controlled-pagination-row-selection-fbkc6x?file=%2Fsrc%2Fmain.tsx&selection=%5B%7B%22endColumn%22%3A8%2C%22endLineNumber%22%3A151%2C%22startColumn%22%3A8%2C%22startLineNumber%22%3A151%7D%5D

Steps to reproduce

Using the linked Codesanbox:

"Bug" 1

1. Check the "Select All" checkbox
2. Go to another page -> no rows are selected

"Bug" 2

1. Check the "Select All" checkbox
2. De-select 1 entry, so the "Select All" checkbox becomes intermediate
3. Go to another page -> no rows are selected, but "Select All" checkbox still intermediate
4. Select any entry (on that new page you just switched to) - "Select All" checkbox becomes unchecked, as if no rows are selected at all, but all previously selected rows are actually still selected

Expected behavior

I'd expect that the kind of pagination doesn't affect how "toggle all rows selection" works.

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

macOS, Chrome

react-table version

8.8.4

TypeScript version

5.6.4

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.

[LoicKairon]

I am having the same issue here

[changyeamoon]

related issue I'm having with fully controlled state: https://github.com/TanStack/table/issues/4812

[petermakowski]

I also have this issue.

[yourcasualdev]

Have same issue with server side pagination. When I move to another page it shows same index of the rows are selected as well

[LoiKos]

Hi,

I am trying to implement row selection (a global all row select) using server-side pagination. It seems to be the same use case as you. After trying different methods and comparing to the CodesandBox provided, i think there is no bug here and the behaviour is totally fine.

We do need getRowId to avoid getting the same row selected between 2 pages, but if you are using something like :

 getRowId: (row) => {
      return row.id
    },

that you now rely on the row.id to perform the selection. And that's the problem. Your list is paginated and there is no way to know all the rows id to select from. That why you are only selecting the page size.

In the example provided on the docs and in your sandbox, the option { keepPreviousData: true } is used but i feel this api is not really working or at least not as supposed to (it won't keep anything).

From this conclusion, i believe there is 2 solutions:

1. Your fine with the selection page per page (e.g: 10 by 10) but instead of using :

<div className='flex-1 text-sm text-muted-foreground'>
        {table.getSelectedRowModel().rows.length} of{' '}
        {table.getFilteredRowModel().rows.length} row(s) selected.
      </div>

You could use the following to show the number of rows selected :

Object.keys(table.getState().rowSelection).length

And a count from your DB to show the total. You get something like 30 of 156 row(s) selected.

2. You want to select all rows. You need to add a new api call or db query to retrieve all ids. Then you can manually select and deselect all rows.

[olikari87]

Having the same issue...