React Grid Selection
The Ignite UI for React Data Table / Data Grid supports single or multiple row and cell selection.
React Grid Selection Example
Overview
Selection in the React data grid is enabled on a row and cell level and can be configured by using the selectionMode
option of the React grid. This property takes five different options, listed below:
None
: Selection is not enabled.SingleCell
: Selection of a single cell is enabled.SingleRow
: Selection of a single row is enabled.MultipleCell
: Selection of multiple cells is enabled.MultipleRow
: Selection of multiple rows is enabled.RangeCell
: Selection of a range of multiple cells by clicking and dragging is enabled.
selectionBehavior
defaults to ModifierBased
, where only one row or cell is selected at a time and modifier keys (CTRL) are required to multi-select items. selectionBehavior
set to Toggle
will allow multiple rows or cells to be selected on single click only.
MultipleRow
includes the following functionality:
- Click and drag to select rows
- Shift and click to select multiple rows.
- Shift and press the up/down arrow keys to select multiple rows.
Pressing the space bar toggles selection of active row via MultipleRow
or SingleRow
.
Row Range Selection
The following example demonstrates how to selected or deselected all rows in the grid. Note, selectionMode
must be set to MultipleRow.