Single Cell Selection
Cell selection lets users highlight individual cells rather than entire rows. Enable it by setting enabled: true, cell: true, and mode: 'single' in the selectable configuration. This mode is a good fit when the Grid behaves like a spreadsheet, or when the selected cell drives a secondary action such as showing a detail panel, launching an inline editor, or updating another part of the UI.
Pair cell selection with navigatable so that keyboard arrow keys move the active cell as users review or enter data without reaching for the mouse.
The following example demonstrates single-cell selection with keyboard navigation enabled, where the select state is handled internally by the Grid.
Controlled Cell Selection
Use controlled selection when the selected cell must stay in sync with external state, for example when another component reads or sets the active cell, or when you need to restore it after a data reload. Keep the selection descriptor in the select prop, update it in onSelectionChange, and set a stable dataItemKey so the Grid can track the correct cell across data changes.
The following example demonstrates controlled cell selection with preset buttons that programmatically set the selection and a click-to-deselect behavior implemented in onSelectionChange.