Selection
Enable row selection and react to selection changes.
Enable row selection with the rowSelection prop — a mode shorthand or a full options object.
<Grid rows={rows} columns={columns} getRowId={(row) => row.id} rowSelection='multiple' statusBar />mode is 'single' or 'multiple'. selectAllScope controls what "select all" means — 'page', 'loaded',
'filtered', or 'all' (default 'all' when omitted).
Reading and driving selection
// Read
const selectedIds = api.getState().selectedRowIds;
const count = api.getState().selectedRowIds.length;
const isSelected = api.isRowNodeSelected('row-42');
// Drive
api.applyRowSelectionGesture({ kind: 'select', rowIds: ['row-1', 'row-2'] });
api.applyRowSelectionGesture({ kind: 'deselect', rowIds: ['row-1'] });
api.applyRowSelectionGesture({ kind: 'toggle', rowIds: ['row-3'] });
api.applyRowSelectionGesture({ kind: 'selectAll', scope: 'filtered' });
api.setState({ selectedRowIds: [] });Reacting to changes
The selection is state: follow it with watch. diffIds says which ids joined or left.
import { diffIds } from '@witbybit/wit-grid-react';
api.watch(
(grid) => grid.selectedRowIds,
(next, previous, cause) => {
const { added, removed } = diffIds(previous, next);
console.log('Selected row ids:', next, 'added', added, 'removed', removed, 'by', cause?.source);
}
);Cell range vs. row selection
rowSelection controls checkbox-style row selection. Rectangular cell-range selection (the Excel-like highlight used by clipboard copy/paste) is
separate and always available — set it with setState({ selection: { anchor, focus } }) (see Grid API).
Edit on GitHub
Last updated on