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:

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 radio-like single selection (no select-all checkbox), add enableMultiRowSelection: false.

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

return <DataTable table={table} />

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,
})

Relevant options

Related

• useDataTable options
• Table instance
• Export