Selection

The selection primitives underneath selectable.

Last updated August 8, 2026

These transforms are what a click, a Ctrl-click, and a Shift-click each reduce to — every one takes the selection it received and returns the selection after, never touching a DOM node or a row of data. @gridkitjs/react calls them from useGridSelection; a second framework binding can call them the same way.

Functions#

Function	Type	Description
`toggleSelection(selection, id, mode)`	`SelectionState`	Adds id if absent, removes it if present — a Ctrl-click, or Space on the focused member.
`selectOnly(selection, id, mode)`	`SelectionState`	The selection reduced to id alone — a plain click. Never deselects, so clicking the one selected row leaves it selected.
`selectRange(selection, orderedIds, anchorId, focusId, mode)`	`SelectionState`	Every id from anchorId to focusId inclusive, spanning orderedIds — a Shift-click. Degrades to selectOnly under "single".
`selectAll(selection, orderedIds, mode)`	`SelectionState`	Every id in orderedIds, or selection untouched under any mode but "multiple".
`clearSelection(selection)`	`SelectionState`	Empties the selection.
`diffSelection(previous, next)`	`SelectionDiff`	What one transition added and removed — the one place a select and a deselect fired for the same interaction cannot disagree.
`selectCell(selection, cell, mode)`	`CellSelectionState`	Moves the cell selection to cell — a plain click. Idempotent: clicking the selected cell again leaves it selected.
`toggleCellSelection(selection, cell, mode)`	`CellSelectionState`	Moves to cell, or clears when it is already there — a Ctrl-click.
`isSameCell(a, b)`	`boolean`	Whether two cell selections address the same row and column.
`intentOf(event)`	`SelectIntent`	Reads a click or key press's modifiers into "replace", "toggle", or "range".
`applySelectionIntent(selection, orderedIds, anchorId, id, intent, mode)`	`SelectionState`	Dispatches an intent to toggleSelection, selectRange, or selectOnly.
`resolveRows(rowsById, ids)`	`readonly ResolvedRow<Row>[]`	Resolves selected ids back to the rows behind them, dropping any id whose row no longer exists.
`resolveColumns(columns, ids)`	`readonly SelectedColumn<Row>[]`	Resolves selected ids back to their column and position, dropping any id whose column no longer exists.
`resolveCell(rowsById, columns, cell)`	`SelectedCell<Row> \| null`	Resolves a cell selection down to its row, column, and value — null if either no longer exists.

The same logic, in the React grid#

selectable

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", columns: "multiple", cells: "single" }}
/>;

Edit this page on GitHub