Row Selection
Single and multi-select modes. Multi-select supports shift-click range selection. A checkbox column is added automatically when enabled.
Multi-select
The default. Every row toggles independently, Shift+click takes a range, and the header checkbox selects all loaded rows.
Single-select
Selecting a row releases the previous one — for master-detail layouts where exactly one row is active.
Enabling row selection
Set config.rowSelection to activate row selection. The minimum config is
{ mode: 'multi' } — a checkbox column is prepended on the left and
clicking any row body selects or deselects it.
Selection modes
-
'multi'(default) — multiple rows can be selected at once. Shift+click selects a contiguous range between the last-clicked row and the current one. Each row click independently toggles its selection state without affecting others. -
'single'— selecting a row automatically deselects the previous one. Use this when your UI needs exactly one row active at a time, such as a master-detail layout where a side panel reflects the selected row.
Checkbox column
checkboxColumn: true (the default) prepends a fixed-width checkbox column.
In multi mode, the header shows a "select all" checkbox that toggles all currently loaded
rows. Move it to the right side with checkboxPosition: 'right'.
Set checkboxColumn: false to remove the checkbox column while keeping
click-to-select behaviour — rows remain selectable by clicking anywhere on the row body.
(selectionChange) output
(selectionChange) fires after every selection change with the full array of
currently selected row objects. Use it to drive a detail panel, enable bulk action buttons,
or update a status counter. Each example above keeps its own counter, so clicking a second
row shows the difference directly: multi keeps the first row, single releases it.
Reactive config
The sample wraps config in a computed() so that switching the mode signal
automatically rebuilds the config object. The grid picks up the change without re-fetching
data — only the selection layer is reconfigured.
Reading selection imperatively
Access selection state at any time via @ViewChild:
grid.selectionSvc.selectedRows() returns the current array (a signal).
grid.selectionSvc.selectedCount() returns the count.
Call grid.selectionSvc.deselectAll() to clear programmatically — e.g. after
a bulk delete or a navigation event.
Mouse & keyboard
| Interaction | Effect |
|---|---|
| Click row | Select (replaces the selection in single mode) |
| Ctrl / Cmd + click | Toggle a row in multi mode without clearing the rest |
| Shift + click | Range-select from the last clicked row (multi mode) |
| Header checkbox | Select / deselect all loaded rows |
Set config.trackBy to a stable id field. Selection is tracked by row identity —
without a stable trackBy, a refetch (sort, filter, page change) produces new object
references and previously selected rows can no longer be matched.
Selection options
| Property | Type | Default | Description |
|---|---|---|---|
| rowSelection.mode | 'single' | 'multi' | — | Enables selection. multi adds Ctrl/Shift combinations and select-all. |
| rowSelection.checkboxColumn | boolean | false | Adds a dedicated checkbox column with a select-all header checkbox. |
| config.trackBy | keyof T | (row) => unknown | — | Stable row identity — required for selection to survive refetches. |
| (selectionChange) | T[] | — | Output — emits the selected row array after every change. |
| grid.selectionSvc.selectedRows | Signal<T[]> | — | Imperative read of the current selection (a signal). |
| grid.selectionSvc.deselectAll() | () => void | — | Clear the selection programmatically. |