React グリッドの選択

Ignite UI for React Data Table / Data Grid は、単一行または複数行およびセルの選択をサポートしています。

React グリッド選択の例

Edit on CodeSandbox

概要

React データ グリッドでの選択は行およびセル レベルで有効になり、React グリッドの selectionMode オプションを使用して構成できます。このプロパティには、以下にリストされている 5 つの異なるオプションがあります。

  • None: 選択は有効にされていません。
  • SingleCell: 単一セルの選択が有効です。
  • SingleRow: 単一行の選択が有効です。
  • MultipleCell: 複数セルの選択が可能になります。
  • MultipleRow: 複数行の選択が可能になります。
  • RangeCell: クリックしてドラッグの複数セル範囲の選択が可能になります。

MultipleRow または MultipleCell に設定すると、複数行またはセルを選択するために CTRL キーを押す必要はありません。各行/セルは、その特定の行/セルをクリックしたときに選択または選択解除されます。

コード スニペット

以下は、React データ グリッド上の選択を構成して、複数行の選択を設定する方法を紹介します。

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