Selection
The selection primitives underneath selectable.
Last updated August 3, 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. |
The same logic, in the React grid
selectable
Live example- 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" }}
/>;