table.getSelectedRowModel() isn't persisting between pages

[cpotey]

I'm currently trying to build a table, using data from an external API (using Tanstack Query/useQuery).

I can render everything fine, and have setup manual pagination (similar to this pagination-controlled example), and am attempting to get Row Selection working. I am 90% of the way there, but struggling with getting the data to persist between pagination.

On clicking next page in the pagination, the table returns the correct data, but seems to forget saved/selected rows from the previous page.

When I try to use table.getSelectedRowModel() - everything is empty. However, if I go back a page, all that data is available when calling table.getSelectedRowModel().

It's like each page is counting as it's own table.getSelectedRowModel(), rather than combining together into one.

---

 const table = useReactTable({
    data: dataQuery.data?.rows.results ?? [],
    columns,
    pageCount: dataQuery.data?.pageCount ?? -1,
    state: {
      pagination,
      sorting,
      rowSelection,
    },
    enableRowSelection: true,
    onPaginationChange: setPagination,
    onRowSelectionChange: setRowSelection,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getRowId: (row) => row.uuid,
    manualPagination: true,
  });

Alternatively, I have got a useState setup, which is storing the row ID into the rowSelection array/state on onRowSelectionChange (lifted from here) This is persisting, but isn't much use to me as it's just IDs.

If there's no way to fix the table.getSelectedRowModel(), is there a way to get the row data from that rowSelection ids somehow?

Hope someone can help, thanks!

[KevinVandy]

Yeah getSelectedRowModel is only going to be able to filter based on the client side data you are passing it. So it doesn't really help much if using server side pagination. The selected row IDs are in the row selection state for you to use as you pointed out though.

[cpotey]

Thanks @KevinVandy, I guess using the row IDs are the way forward

Have you got any examples of how I can use these IDs to pull the actual rowData back from the table?
I currently just have an object like this:

{
    1c529615-3432-1dad2e04dc50: true,
    510d084d-4bd7-6dcba159caa1: true
    a51f5e5d-126a-da7809219f43: true
    cbf9521d-aad4-d5b5b57effc1: true
}

Or is there a way to push the "whole row object" to that state, instead of just getting an id: boolean

[KevinVandy]

I just map through all my data in the backend and filter/query based on selected ids

[cpotey]

Ah okay thanks, so nothing when wanting to stay within the frontend? Any sort of table.getRowById('1c529615-3432-1dad2e04dc50')?

Or is there any alternative to push the whole row object into state when using onRowSelectionChange?

[KevinVandy]

I guess I'm wondering how you expect the table to generate rows for data that is not being passed in via data. Or is my assumption false? Are you using server side or the built-in client-side pagination?

[vincehi]

I have the same question, since my pagination is server-side, but I'd like the front-end to keep track of the selected line so that, for example, I can displayed on the side and quickly delete them if I've applied a filter that doesn't allow them to be displayed on the table or if I'm on a different page.

[AdarshJais]

Any success in achieving this?