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' showStatusBar />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.getSelectedRowIds();
const count = api.getSelectedRowCount();
const isSelected = api.isRowNodeSelected('row-42');
// Drive
api.selectRows(['row-1', 'row-2'], { mode: 'add' });
api.deselectRows(['row-1']);
api.toggleRowSelection('row-3');
api.selectAllRows({ scope: 'filtered' });
api.clearRowSelection();Reacting to changes
import { GridEventName } from '@witbybit/wit-grid-react';
api.addEventListener(GridEventName.rowSelectionChanged, ({ payload }) => {
console.log('Selected row ids:', payload.selectedRowIds);
console.log('Changed row ids:', payload.changedRowIds);
});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 — see Grid API for selectCell / selectRange.
Edit on GitHub
Last updated on