Rows

Row selection

Add a checkbox column for selecting whole rows, keyed by row id so the selection survives sorting, filtering and live updates.

Row selection adds a leading checkbox column for picking whole rows, for example to act on several orders at once. The selection is a set of row ids, not positions, so it survives sorting, filtering and a live feed reordering rows. It is separate from cell selection, the range a user drags over cells.

Tick a few rows, then sort a column: the same rows stay ticked. The header checkbox selects or clears every row that matches the current filter.

row-selection.svelte GitHub ↗

Turning it on

<script lang="ts">
  let selected = $state<Array<string | number>>([]);
</script>

<Grid {rows} {columns} rowSelection onRowSelectionChange={(ids) => (selected = ids)} height={480} />

Click a checkbox, or press Space on the focused row.
The header checkbox selects or clears all rows that pass the current filters.
onRowSelectionChange receives the selected ids whenever the set changes.
api.getSelectedRows() returns the ticked rows themselves, in view order.

Row ids

Selection is keyed by row.id. If your rows are identified by another field, such as a UUID or a composite key, pass getRowId:

<Grid {rows} {columns} rowSelection getRowId={(r) => String(r.uuid)} height={480} />

One active row

For a list-and-detail layout, where one row is “open”, use selectedRowId instead. It highlights a single row, is fully controlled by your app, and is independent of the checkboxes. Pair it with onRowClick:

<Grid {rows} {columns} selectedRowId={openId} onRowClick={(r) => (openId = r.id)} height={480} />

With server data

With a server data source, the checkboxes work on loaded rows. The header checkbox is disabled, because ids of rows that are not loaded cannot be listed.

Reference

Grid props from the types

rowSelection boolean Default false

Show a leading checkbox column for whole-row selection (keyed by row id, stable across sort/filter).

onRowSelectionChange (selectedIds: Array<string | number>) => void

Called with the selected row ids whenever the row-selection set changes.

Example

<Grid {rows} {columns} height={480} rowSelection onRowSelectionChange={(ids) => (selected = ids)} />

getRowId (row: GridRow) => string | number Default (row) => row.id

Identity key for rows: selection, focus, pins and flashes follow it. Override for string/UUID/composite keys.

Example

<Grid {rows} {columns} height={480} getRowId={(row) => `${row.account}:${row.sym}`} />

selectedRowId string | number | null Default null

Controlled "active row" highlight (keyed by getRowId) — for master-detail / list-detail where one row is selected. Independent of the checkbox rowSelection and the cell range selection. null = none.

onRowClick (row: GridRow, event: MouseEvent | KeyboardEvent) => void

Called when a data row is activated by click or Enter (open a detail view, navigate, …). Edit-input and checkbox clicks are excluded.

Example

<Grid {rows} {columns} height={480} {selectedRowId} onRowClick={(row) => (selectedRowId = row.id)} />

Grid API from the types

getSelectedRows (): GridRow[]

Ticked rows (needs rowSelection), in view order.

Example

const ids = api.getSelectedRows().map((row) => row.id);