Selection in React Data Grid

The Syncfusion® React Data Grid supports a built-in selection feature that allows interactive highlighting of single or multiple rows. This feature is useful for performing data operations, highlighting specific rows, or executing custom actions within the grid

Selection mode

The Data Grid component manages row selection behavior through the selectionSettings.mode property. This property defines whether single or multiple rows can be selected. The supported selection modes are:

Single row selection

The default value for selectionSettings.mode is Single. In this mode, only one row can be selected at a time by clicking it or pressing Space key on the focused row.

Multiple row selection

Set selectionSettings.mode to Multiple to enable selecting more than one row. This mode supports selection in two ways:

Multiple rows: Hold Ctrl (on ⌘ macOS) key while clicking each row to include in the selection.
Range of rows: Click any row to select it, then hold the Shift key and click another row to select all rows between them.

Toggle selection is disabled by default, do not allowing a row to be selected or deselected by clicking the same row.

Prevent selection using property

To disable row selection, set selectionSettings.enabled to false. This disables all selection interactions and related events, effectively turning off row selection functionality within the grid.

Customizing selection and hover styles

To customize the default style of selected rows, modify the styles in the .sf-grid .sf-active CSS class. To change the appearance of rows when hovered over, apply styles to .sf-grid-content-row:hover .sf-cell. The example below shows how the background colors for both selected and hovered rows can be modified.

Programmatic selection

Row selection can be managed programmatically with the following methods:

selectRow(index): Selects a single row at the specified index.
selectRows([indices]): Selects multiple rows by providing an array of indices. Ensure that selectionSettings.mode is set to Multiple in the grid configuration to enable selecting more than one row.
clearRowSelection([indices]): Removes selection only from the specified rows, without affecting other selected rows.
clearSelection(): Clears all selected rows.

Toggle selection

The Data Grid component includes the toggle selection feature, which is disabled by default. Clicking an unselected row selects it, while clicking a selected row should not deselects it. This behavior applies to both single and multiple selection modes.

To enable toggle selection, set selectionSettings.enableToggle to true. When enabled, selection behaves as follows:

Single selection mode

Clicking a selected row again deselects it.
Selecting a different row by clicking or using the selectRow method clears the previous selection and selects the new row.

Multiple selection mode

Clicking a selected row without holding Ctrl key clears other row selections and retains only the clicked row.
Clicking the same row again with holding Ctrl key removes its selection, resulting in no selected rows.
Holding Ctrl key allows modifying the selection without clearing other rows.
Holding Shift selects a range of rows between the last focused row and the clicked row.

On macOS, use the ⌘ key in place of the Ctrl key.

Events

The Data Grid component provides event hooks for selection changes:

Event	Description
`onRowSelect`	Fires after a row is selected. Provides details for post-selection actions such as highlighting, loading related data, or updating UI elements.
`onRowDeselect`	Fires after a row is deselected. Provides details for actions such as clearing data, resetting UI states, or logging deselection events.