Web Components グリッドの選択

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

Web Components グリッド選択の例

Edit on CodeSandbox

概要

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

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

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

コード スニペット

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

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