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.
To deselect the currently selected row, click it again. This is achieved by managing the select state and checking inside onSelectionChange whether the clicked row is already selected - if it is, the selection is cleared.
The following example demonstrates how to enable single-row selection with support for deselecting a row by clicking it again.
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:jsxselectable={{ 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
This example demonstrates how to persist and restore selection state by storing the selection object in localStorage.