Cell selection

Letting the user select one cell at a time with selectable.cells.

Last updated August 3, 2026

selectable.cells takes only false or "single": a cell addresses one value, so there is no "multiple" and no range to take. A click moves the selection to that cell; Ctrl-click on the selected cell clears it.

Single-select cells

selectable={{ cells: "single" }}

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={{ cells: "single" }}
  onCellSelect={({ cell }) => console.log(cell.value)}
/>;

Props

Prop	Type	Default	Description
`selectable.cells`	`false \| "single"`	`false`	How many cells the user may select at once — no "multiple": a cell addresses one value, so there is no range to take.
`defaultCellSelection`	`CellSelectionState`		The cell selected to start with. Uncontrolled.
`onCellSelect / onCellDeselect`	`(event: CellSelectEvent) => void`		Once for the cell selected, once for the cell deselected.
`onCellSelectionChange`	`(event: CellSelectionChangeEvent) => void`		Once per change with what was selected and what was deselected — one interaction can fill both, since moving between cells deselects and selects at once.

Edit this page on GitHub