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 #4555 or #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

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

[LoicKairon]

I am having the same issue here

[changyeamoon]

related issue I'm having with fully controlled state: #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...

[niemyjski]

+1

[rob-steele-active]

I'm by no means an expert in this and if I'm totally off base then someone please weigh in but it seems like this is expected behavior. Tanstack table stores selected rows as an object keyed with the id of the row and a boolean value indicating if it is selected. If you are paginating server side then rows that are not present on the client can't be marked as selected. When you load more data from the server Tanstack table will correctly indicate that not all rows are selected because those row ids are not present in the object.

[aldenquimby]

I am just running into this. Did anyone come up with a working solution? I am about to try:

• update server to respond with array of allIds, rather than a totalCount (not ideal)
• manually set row selection state to have all of those IDs enabled when select all is clicked

EDIT - we shipped ^ and it is working for us with thousands of rows. We'll see when it breaks down

[Diwanshumidha]

+1

[KevinVandy]

These bugs are just expected behavior in my opinion. TanStack Table can only select the rows that it knows about in the client-side. If you need true select all behavior and are using manual pagination, then you'd need to have your own flag and logic to handle selecting all rows.