Selection

The Ignite UI for React Data Table / Data Grid supports single or multiple row and cell selection.

Demo

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.

When set to MultipleRow or MultipleCell, it is not necessary to hold the CTRL key to select multiple rows or cells. Each row or cell will be selected or deselected on click of that particular row or cell.

Code Snippet

The following demonstrates how to configure selection on the React data grid to set multiple row selection:

<IgrLiveGrid
    height="100%"
    width="100%"
    dataSource={this.data}
    selectionMode="MultipleRow" />