Export Selected Rows

1.Selection is keyed by id, so it survives pagination

By default TanStack keys selection by row index, so row 3 on page 1 and row 3 on page 2 would share a checkbox. getRowId makes the key the customer's id, so ticking rows on several pages builds one selection.

const table = useReactTable({
  data,
  columns,
  getRowId: (row) => row.id,
  state: { rowSelection },
  onRowSelectionChange: setRowSelection,
  // ...
})

2.The header checkbox covers the page, "Select all" covers the table

The header box uses toggleAllPageRowsSelected, so it only touches the rows the user can see, and shows a dash when some of them are selected. Once the whole page is ticked, a "Select all 25" link offers the rest, the same pattern Gmail uses.

checked={
  table.getIsAllPageRowsSelected()
    ? true
    : table.getIsSomePageRowsSelected() ? 'indeterminate' : false
}
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}

3.Export reads the selected row model, not the visible rows

getSelectedRowModel() returns every selected row across all pages, in table order. The select column is skipped, and values come from row.getValue() so the file gets 4200 rather than "$4,200".

const selectedRows = table.getSelectedRowModel().rows

const rows = selectedRows.map((row) =>
  exportColumns.map((column) => String(row.getValue(column.id) ?? '')),
)