Checkbox Selection in React Data Grid

The Syncfusion® React Data Grid component includes checkbox selection for multiple rows, with checkboxes provided in each row. A header checkbox provides select-all functionality across all rows. This enables efficient bulk operations on selected records.

Enable checkbox selection

Checkbox selection is enabled by defining a column with the type property set to Checkbox, which automatically displays a checkbox in each row and in the column header. By default, the grid is configured for multiple selection mode, allowing several rows to be selected at once. To change the selection mode to single selection with checkbox, set the selectionSettings.mode property to Single.

Selection persists across operations with the selectionSettings.persistSelection property, which is enabled by default when rendering checkboxes. For selection persistence in the Data Grid component, designate one column as the primary key using the isPrimaryKey property.

Select all with local data

When the grid is bound to a local data source, clicking the select-all checkbox in the column header selects all rows. The header checkbox then changes to the checked state, clearly indicating that every row is selected.

Select all with remote data

When the grid is bound to a remote data source, clicking the select all checkbox in the column header sets it to an indeterminate state. At this stage, only the currently loaded rows are selected, while rows on other pages remain unselected. As you navigate to additional pages, the newly loaded rows are automatically selected. Once all pages have been visited and their rows selected, the header checkbox changes to the checked state, confirming that all rows across the remote data source are selected.

Disable the select-all options

By default, setting column type to Checkbox adds a column with checkboxes for row selection, including a header checkbox that allows selecting all rows at once. To hide the header checkbox and disable the select all option, set the headerCheckbox property to false in the column configuration.

Persistent checkbox selection

The Data Grid component's checkbox selection supports persistent selection, which maintains selected rows during operations such as sorting, paging, filtering, refreshing, etc. This persistence is achieved through the primary key of a unique column, ensuring that row selections remain consistent across grid actions.

When checkbox selection enabled, selection persistence is activated by default. If you prefer selections not to be maintained after a grid refresh, disable persistence by setting selectionSettings.persistSelection to false.

When persistence is disabled:

The grid does not maintain row selections during actions such as sorting, paging, filtering, searching, or content refreshing.
Selections are automatically cleared after every grid action.
The select all option applies only to the current page of data, not across all pages.

Select rows only via checkbox

When the selectionSettings.checkboxOnly property is set to true, grid rows can be selected only by clicking the checkbox in the column. This prevents row selection through other interactions such as clicking on the cell or row itself. This ensures that selection is strictly controlled through checkboxes, providing a consistent and predictable experience.

Retrieve selected rows

To retrieve the selected records from the grid, use the getSelectedRecords() method. This method returns an array of data objects representing the currently selected rows.

Behavior after clicking the select all checkbox:

Local data with persistence: Returns all selected records across all pages.
Remote data with persistence: Returns selected records only from the currently loaded page and returns all records once every page has been loaded.
Without persistence: Returns selected records only from the current page.