Row selection

Letting the user select whole rows with selectable.rows.

Last updated August 3, 2026

selectable.rows takes false, "single", or "multiple" — off by default, since selection claims the click a display-only grid shouldn't. Give getRowId alongside it for data that sorts, filters, or pages; without one a row is identified by its position, so a re-sort leaves the same positions selected under different rows.

Multi-select rows

selectable={{ rows: "multiple" }}

Live example

Id	Service	Environment Name	Environment Region	Status	Cost
1	checkout-api	production	us-east-1	healthy	1240.5
2	billing-worker	production	eu-west-1	degraded	860.2
3	search-index	staging	us-east-1	healthy	92.75
4	notifications	production	us-west-2	down	305.4
5	analytics-pipeline	staging	eu-west-1	healthy	145

Interact with the grid above to see its callbacks fire.

<DataGridComponent
  columns={columns}
  dataSource={rows}
  getRowId={(row) => String(row.Id)}
  selectable={{ rows: "multiple" }}
  onRowSelectionChange={({ selected }) => persist(selected)}
/>;

Props

Prop	Type	Default	Description
`selectable.rows`	`false \| "single" \| "multiple"`	`false`	How many rows the user may select at once.
`getRowId`	`(row: Row, index: number) => string`	`row position`	A row's stable identity. Give one for data that sorts, filters, or pages, or a selection follows the position rather than the row.
`defaultRowSelection`	`SelectionState`		Row ids selected to start with, keyed as getRowId resolves them. Uncontrolled.
`onRowSelect / onRowsSelect`	`(event) => void`		Once per row newly selected, and once per interaction with every row it selected.
`onRowDeselect / onRowsDeselect`	`(event) => void`		The deselecting counterpart of each, above.
`onRowSelectionChange`	`(event: RowSelectionChangeEvent) => void`		Once per change with what it added, what it removed, and everything selected after — the one to persist from.

Edit this page on GitHub