Row selection

Set enableRowSelection: true to add a leading checkbox column. When rows are selected, a selection alert banner appears showing the current count.

enableRowSelection accepts a boolean or a (row) => boolean predicate (standard TanStack), so you can allow selecting only certain rows.

row-selection

Multi-row selection with a select-all checkbox in the header.

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  enableRowSelection: true,
})

return <DataTable table={table} />

Read the current selection at any time. To show it in your own component's render, subscribe to it with stateSelector (the component holding the table does not re-render on table changes by default; see State management):

const table = useDataTable({
  // …
  enableRowSelection: true,
  stateSelector: (state) => state.rowSelection,
})

const selected = table.getState().rowSelection

Or control it from your own state:

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

You can also gate selection per row with a predicate:

enableRowSelection: (row) => row.original.status !== "archived"

single-selection

For single selection, add enableMultiRowSelection: false. Checking a row unchecks the one before it, and the select-all checkbox goes away.

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  enableRowSelection: true,
  enableMultiRowSelection: false,
})

return <DataTable table={table} />

Selecting a range

Click one row's checkbox, then shift-click another: every row between them takes the same state — selected, or cleared if the shift-clicked row was selected. Ranges follow the rows as displayed (sorted and filtered). Turn it off with enableBatchRowSelection: false.

Select-all behavior

The selection column header carries a select-all checkbox. selectAllMode controls its scope — "page" (default) toggles the current page, "all" toggles every row across pages. Set enableSelectAll: false to hide the header checkbox entirely.

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  enableRowSelection: true,
  selectAllMode: "all", // "page" | "all"
  enableSelectAll: true,
})

Where the selection banner shows

positionToolbarAlertBanner places the banner with the selected count and Clear selection: "top" (default, between the toolbar and the table), "bottom" (under the table), "head-overlay" or "none".

With "head-overlay" (as in Material React Table) the banner lies over the header row instead, with the select-all checkbox at its start, so selecting rows never pushes the table down. It stays over a sticky header while the table scrolls, spans the visible width when it scrolls sideways, and goes away when nothing is selected, leaving the header clickable again. If you Tab into a header control while it shows, it steps aside until focus leaves the header row. It needs the table head (enableTableHead).

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  enableRowSelection: true,
  positionToolbarAlertBanner: "head-overlay", // "top" | "bottom" | "head-overlay" | "none"
})

Relevant options

Related