React Grid - Selection

The Grid component supports selecting/deselecting rows programmatically or via the UI. It seamlessly integrates with paging, sorting, filtering, and grouping.

Related Plugins

The following plugins implement selection features:

• SelectionState - controls the selection state
• IntegratedSelection - performs built-in selection
• TableSelection - renders selection checkboxes or highlights the selected rows

Note that plugin order is important.

Basic Setup

Import the SelectionState and TableSelection plugins to set up a simple Grid with selection enabled. The following example demonstrates how to configure selection in the controlled mode. Pass the initially selected rows to the SelectionState plugin's selection property and handle the onSelectionChange event to control the selection.

Select on a Row Click

A user can select a row using a checkbox click by default. Set the TableSelection plugin's selectByRowClick property to true to check/uncheck a checkbox by a row click as demonstrated in the following example:

In some scenarios, it is useful to highlight selected rows instead of using checkboxes. For this, hide checkboxes by setting the TableSelection plugin's showSelectionColumn property to false and assign true to the selectByRowClick and highlightRow properties as demonstrated in the following demo:

Select All

Perform the following steps to enable the Select All capability:

• Add the IntegratedSelection plugin above the TableSelection one.
• Add the TableHeaderRow plugin.
• Set the TableSelection plugin's showSelectAll property to true.

Without Paging

The following example demonstrates selection without paging. You can increase the row count using the Table's virtual mode.

With Paging

If you are using the IntegratedPaging plugin, you can integrate the Select All behavior with the PagingState plugin.

The Select All checkbox selects/deselects all rows on a page or all pages depending on the IntegratedSelection and IntegratedPaging plugin's order.

Place the IntegratedSelection plugin after IntegratedPaging to implement the Select All behavior within a visible page:

Place the IntegratedSelection plugin before IntegratedPaging to select/deselect all rows on all pages: