Single Row Selection
Single Row selection can be enabled by setting the enabled prop of the GridSelectableSettings to true and its mode prop to single.
The following example demonstrates how to enable the single-row selection of the Grid where the select state is handled internally by the Grid.
Checkbox Selection
The Grid provides both checkbox and row-click selection options which can be applied to single or multiple records.
To configure the checkbox selection:
-
Configure the
GridSelectableSettingsas follows:html<Grid :selectable="{ enabled: true, drag: false, cell: false, mode: 'single' }" > -
Handle the
GridSelectionChangeEventand theonHeaderSelectionChangeevents which will be fired once the user clicks a checkbox. -
Update the built-in
selectin the events handled above.
The following example demonstrates how to implement multiple selection both on row click and with checkboxes.
Persisting Checkbox Selection
The select state object is a plain map of dataItemKey values to booleans, which makes it straightforward to serialize with JSON.stringify and store in localStorage. On mount, the Grid restores any previously saved selection by reading from storage and passing it as the initial select value.
The following example demonstrates this pattern. Use the Save Selection button to write the current selection to localStorage, and Load Selection to read it back — the selection will also survive a page refresh if saved.