Single Row Selection
Single row selection lets the user highlight one Grid row at a time. Enable it by setting the selectable prop with enabled set to true and mode set to single.
This is a good fit when users should work with one active record at a time, for example when showing details in a side panel or opening an edit form for the selected item. Use defaultSelect to pre-select a row on first render without taking over selection state management.
The following example demonstrates single-row selection with a pre-selected row on load.
Controlled Row Selection
Use controlled selection when the selected row must survive data refreshes, paging, filtering, or other external state changes. Keep the current selection in the select prop, handle onSelectionChange to update it, and always set a stable dataItemKey so the selection descriptor tracks the correct row across data changes.
The following example demonstrates controlled row selection with preset buttons that programmatically set the selection and a click-to-deselect behavior implemented in onSelectionChange.
If you later expand the experience to multi-row selection, the same controlled pattern applies. For examples that combine controlled selection with grouping, paging, and filtering, see the multi-row selection article.
Checkbox Selection
Use checkbox selection when row clicks are reserved for another action such as navigation, editing, or expanding a detail row. Adding a checkbox column makes the selection intent unambiguous.
To configure checkbox selection:
-
Add a
ColumnwithcolumnType="checkbox"as the first column. -
Configure
GridSelectableSettingson the Grid:jsxselectable={{ enabled: true, drag: false, cell: false, mode: 'single' }} -
Handle
onSelectionChangeandonHeaderSelectionChangeand update theselectstate withevent.selectin both handlers.
In single mode the header checkbox is not shown as a select-all control. Switch mode to multiple to enable select-all and range selection — see the multi-row selection article for those patterns.
The following example demonstrates single checkbox selection where both row clicks and the checkbox column toggle the selected row.
Persisting Checkbox Selection State
Persisting the selection state is useful when users leave and return to the page, or when you need to preserve their working context across refreshes. Store the selection descriptor rather than the entire data item so the selection can be reapplied efficiently after the data is loaded again.
This example demonstrates how to persist and restore selection state by storing the selection object in localStorage.