Selected Rows with Server Side Pagination

[JeremyEnglert]

I'm a a bit new to React and even newer to react-table - so excuse my question.

I have a table that uses server side pagination (and filtering). I'm attempting to add the ability to select rows - which is working for the most part.

However, if you select a row and then change pages on the table, the selected row moves to the new page. For example, if I select the first row - and then change pages - the first row of page 2 will be selected (and the data also changes to the first row of page 2).

I did some digging and a few posts mentioned adding getRowId: row => { return row.id } - however, that leads to only the last post of a page showing up.

I setup a CodeSandbox with a reduced version of the code:
https://codesandbox.io/s/brave-beaver-59ron?file=/src/Table.js

Am I missing something, or totally off?

[fcFn]

Unlike selectedFlatRows, selectedRowIds does not reset when the page changes.

[tsunaweak]

Hi, have you solved this concern?

[ThePiyushAggarwal]

I am posting here some snippets from my code where I could make this work.

Using Checkbox component from shadcn-ui

  columnHelper.display({
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={table.getIsAllPageRowsSelected()}
        onCheckedChange={(checked) =>
          table.toggleAllPageRowsSelected(!!checked)
        }
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(checked) => row.toggleSelected(!!checked)}
      />
    ),
  }),

My common data table component

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
  pagination: Pagination
  rowSelection: {
    rowSelection: RowSelectionState
    setRowSelection: (rowSelection: RowSelectionState) => void
  }
  rowId: keyof TData
}

export function DataTable<TData, TValue>({
  columns,
  data,
  pagination,
  rowSelection,
  rowId,
}: DataTableProps<TData, TValue>) {
  const { pageIndex, pageSize } = pagination

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    // Pagination
    pageCount: pagination.pageCount,
    state: {
      pagination: {
        pageIndex,
        pageSize,
      },
      rowSelection: rowSelection.rowSelection,
    },
    onPaginationChange: (updater) => {
      if (typeof updater === "function") {
        pagination.setPagination(updater({ pageIndex, pageSize }))
      }
    },
    manualPagination: true,
    enableRowSelection: true,
    onRowSelectionChange: (updater) => {
      if (typeof updater === "function") {
        rowSelection.setRowSelection(updater(rowSelection.rowSelection))
      }
    },
    getRowId: (row) => row[rowId] as unknown as string,
  })

Using getRowId, toggleAllPageRowsSelected, toggleSelected works for controlled row selection. Do not use the handler versions.

[Gabswim]

One way to deselect all the rows is to do resetRowSelection https://tanstack.com/table/v8/docs/api/features/row-selection#resetrowselection.

[YewTreeWeb]

I can confirm that adding getRowId: (row) => row.uid as unknown as string, to useReactTable, then changing the checkbox on change events to onChange={(event) => row.toggleSelected(event.target.checked)} and onChange={(event) => table.toggleAllPageRowsSelected(event.target.checked)} worked for me.

The only thing I have an issue with after this which I haven't solved yet is toggling the 'indeterminate' state of the header checkbox as table.getIsSomeRowsSelected() still remains active when no other rows are selected.