React Grid の複数行レイアウト

Grid のレンダリング機能を拡張します。この機能により、単一のデータレコードを複数の表示行に分割することができます。

React Grid 複数行レイアウトの例

複数行レイアウトの宣言は、IgrColumnLayout コンポーネントによって実現されます。各 IgrColumnLayout コンポーネントは、単一または複数の IgrColumn コンポーネントを含むブロックと見なします。一部のグリッド機能はブロック レベルで機能します (下記の「機能の統合」セクション参照)。たとえば、仮想化ではブロックを使用して仮想チャンクを決定します。そのため、レイアウトで許容される場合は、パフォーマンスを向上させるために列を更に IgrColumnLayout ブロックに分割します。複数行のレイアウトを設定するときは、これらのブロックの外側に列がなく、IgrColumnGroup を使用しないでください。複数行のレイアウトは、グリッド レイアウト仕様上に実装されており、その要件に準拠する必要があります。

IgrColumn は各セルの位置と範囲を決めるために 4 つの IgrInput プロパティを公開します。

• ColStart - フィールドの開始位置となる列インデックス。このプロパティは必須です。
• RowStart - フィールドの開始位置となる行インデックス。このプロパティは必須です。
• ColEnd - 現在のフィールドが終了する位置の列インデックス。colStart と colEnd の間の列数によって、そのフィールドまでの列の幅が決まります。このプロパティはオプションです。設定されていない場合、デフォルトは colStart + 1 になります。
• RowEnd - 現在のフィールドが終了する行インデックス。rowStart と rowEnd の間の行数によって、そのフィールドにまたがる行数が決まります。このプロパティはオプションです。設定されていない場合は、デフォルトで rowStart + 1 に設定されます。

<IgrColumnLayout>
    <IgrColumn rowStart="1" colStart="1" rowEnd="3" field="ID"></IgrColumn>
</IgrColumnLayout>
<IgrColumnLayout>
    <IgrColumn rowStart="1" colStart="1" colEnd="3" field="CompanyName"></IgrColumn>
    <IgrColumn rowStart="2" colStart="1" colEnd="2" field="ContactName"></IgrColumn>
    <IgrColumn rowStart="2" colStart="2" colEnd="3" field="ContactTitle"></IgrColumn>
</IgrColumnLayout>
<IgrColumnLayout>
    <IgrColumn rowStart="1" colStart="1" colEnd="3" field="Country"></IgrColumn>
    <IgrColumn rowStart="1" colStart="3" colEnd="5" field="Region"></IgrColumn>
    <IgrColumn rowStart="1" colStart="5" colEnd="7" field="PostalCode"></IgrColumn>
    <IgrColumn rowStart="2" colStart="1" colEnd="4" field="City"></IgrColumn>
    <IgrColumn rowStart="2" colStart="4" colEnd="7" field="Address"></IgrColumn>
</IgrColumnLayout>
<IgrColumnLayout>
    <IgrColumn rowStart="1" colStart="1" field="Phone"></IgrColumn>
    <IgrColumn rowStart="2" colStart="1" field="Fax"></IgrColumn>
</IgrColumnLayout>

上記の設定の結果は、以下のスクリーンショットで確認できます。

[!Note] RowStart と ColStart プロパティは、IgrColumnLayout 内の各 IgrColumn に設定する必要があります。IgrColumnLayout コンポーネントはレイアウトが正しいかどうかを検証しておらず、それについてエラーや警告をスローしません。開発者は、レイアウトの宣言が正しく、完全であることを確認し、誤った配置、オーバーラップ、ブラウザーでの不整合、レイアウトの崩れなどを回避する必要があります。

機能の統合

複数行レイアウトのレンダリング方法は全く異なるため、列ピン固定や列非表示など一部の列機能は IgrColumnLayout コンポーネントでのみ機能します。その他の機能ソートとグループ化などは、IgrColumn コンポーネントで同じように機能します。

• フィルタリング - Excel スタイルのフィルタリングのみがサポートされています。FilterMode を FilterMode.quickFilter に明示的に設定しても効果はありません。
• ページング - 表示行ではなくレコードで機能します。
• グループ化 - HideGroupedColumns オプションは、複数行レイアウトでは効果がありません。グループ化された列は常に表示されます。

以下の機能は現在サポートされません。

• 列の移動
• 複数列ヘッダー
• Excel へのエクスポート
• 集計

キーボード ナビゲーション

複数行レイアウトを持つ IgrGrid は、ビルトインのキーボード ナビゲーションを提供します。

水平ナビゲーション

• ← または → は、現在行内の左右に隣接するセルに移動します。定義されている列レイアウトの影響を受けません。現在のセルが複数の行にまたがる場合は、他の隣接するセルへ移動した場合を除き、← と → は、同じ rowStart で左右の最初のセルに移動します。ナビゲーションはナビゲーション開始セルを格納し、可能であれば同じ rowStart を持つセルに移動します。
• Ctrl + ← (HOME) または Ctrl + → (END) - 行の先頭または末尾に移動し、ナビゲーション開始セルに従ってセルを選択します。

垂直ナビゲーション

• ↑ または ↓ - 開始位置に対して上下のセルに移動し、行の影響は受けません。現在のセルが複数の列にまたがる場合は、次のアクティブ セルがナビゲーション開始セルに従って選択されます。
• Ctrl + ↑ または Ctrl + ↓ - 最初の行または最後の行の同じ列に移動してフォーカスを適用します。
• Ctrl + Home または Ctrl + End - 最初の行に移動して最初のセルに移動するか、最後のセルに移動します。最後のセルに移動してフォーカスを合わせます。

[!Note] 複数の行または列にわたるセルを介したナビゲーションは、ナビゲーション開始セルに従って行われ、反対方向のキーを使用して開始セルに戻ることができます。グループ行を移動するときにも同じ方法が使用されます。

[!Note] 選択と複数セル選択はレイアウトで使用できます。つまり、セルがアクティブになると、そのレイアウトが選択されます。ドラッグ選択などの複数選択のすべての機能も適用可能であり、セルごとではなくレイアウトごとに機能します。

カスタム キーボード ナビゲーション

グリッドでは、特定のキーが押されたときのデフォルトのナビゲーション動作をカスタマイズできます。隣りのセルまたは下のセルへ移動するような操作は、キーボード ナビゲーション API を使用して簡単に処理できます。

• GridKeydown が公開されています。イベントは IGridKeydownEventArgs を発生します。このイベントは、キーボードで上記のキー組み合わせを介してのみ使用できます。他のすべてのキー操作では、KeyDown イベントを使用できます。
• NavigateTo - このメソッドを使用すると、提供された RowIndex と VisibleColumnIndex に基づいて位置に移動できます。

以下のデモでは、Excel と同じように、Enter と Shift + Enter キーを使って追加のナビゲーションを使用します。

デモ

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<IgrGrid className="grid"></IgrGrid>

次に、そのクラスに関連する CSS プロパティを設定します。

.grid {
    --ig-grid-cell-active-border-color: #ffcd0f;
    --ig-grid-cell-selected-background: #6f6f6f;
    --ig-grid-row-hover-background: #fde069;
    --ig-grid-row-selected-background: #8d8d8d;
    --ig-grid-header-background: #494949;
    --ig-grid-header-text-color: #fff;
}

デモ

API リファレンス

• IgrGrid
• IgrColumnLayout
• IgrColumn

その他のリソース

• 仮想化とパフォーマンス
• ページング
• ソート
• 列のサイズ変更
• 選択

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)