Selection

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

Demo

Overview

Selection in the Web Components data grid is enabled on a row and cell level and can be configured by using the selectionMode option of the Web Components 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 Web Components data grid to set multiple row selection:

<igc-live-grid id="grid"
      height="100%"
      width="100%"
      selection-mode="MultipleRow">
</igc-live-grid>