React グリッドの選択

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

    React グリッド選択の例

    概要

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

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

    selectionBehavior のデフォルトは ModifierBased で、一度に 1 つの行またはセルのみが選択され、項目を複数選択するには修飾キー (CTRL) が必要です。selectionBehavior を Toggle に設定すると、シングル クリックでのみ複数の行またはセルを選択できます。

    MultipleRow には次の機能が含まれています。

    • クリックしてドラッグし、行を選択します。
    • Shift キーを押しながらクリックして、複数の行を選択します。
    • Shift キーを押しながら上下の矢印キーを押して、複数の行を選択します。

    スペース バーを押すと、MultipleRow または SingleRow を介してアクティブな行の選択が切り替わります。

    範囲の行選択

    次の例は、グリッド内のすべての行を選択または選択解除する方法を示しています。selectionMode は MultipleRow に設定する必要があることに注意してください。

    API リファレンス