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.

Change Theme

Theme

Loading ...

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 GridSelectableSettings as follows:

jsx

selectable={{
    enabled: true,
    drag: false,
    cell: false,
    mode: 'single'
}}

Handle the GridSelectionChangeEvent and the onHeaderSelectionChange events which will be fired once the user clicks a checkbox.
Update the built-in select in the events handled above.

The following example demonstrates how to implement multiple selection both on row click and with checkboxes.

Change Theme

Theme

Loading ...

This example demonstrates how to persist and restore selection state by storing the selection object in localStorage.

Change Theme

Theme

Loading ...