React Tree Grid セル結合

Ignite UI for React Tree Grid には、同じ値を持つ隣接セルを 1 つの大きなセルに結合するセル結合機能があります。結合は列内で縦方向に適用され、重複する値を減らして可読性を向上させます。既定ではデータ値の一致でセル結合されるほか、カスタム条件を設定して結合するように構成できます。

React Tree Grid セル結合の例

セル結合の有効化と使用

グリッドでのセル結合は、以下の 2 つのレベルで制御されます:

グリッドレベルの結合モード - 結合がいつ適用されるかを決定
列レベルの結合トグル - どの列でセルを結合できるかを決定

グリッド結合モード

グリッドは、GridCellMergeMode 列挙型の値を受け入れる cellMergeMode プロパティを公開します。

always - ソート状態に関係なく、結合条件を満たすすべての隣接セルを結合。
onSort - 列がソートされているときのみ隣接セルを結合 (デフォルト値)。

<IgrTreeGrid data={data} cellMergeMode={cellMergeMode} >
    ...
</IgrTreeGrid>

const cellMergeMode: GridCellMergeMode = 'always';

列結合のトグル

列レベルでは、merge プロパティで結合の有効または無効を切り替えます。

<IgrColumn field="OrderID" merge={true}></IgrColumn>
<IgrColumn field="ShipperName" merge={false}></IgrColumn>

上記の例では:

OrderID 列は、隣接する重複値を結合します。
ShipperName 列は、結合を行わず通常通りに描画されます。

組み合わせた例

<IgrTreeGrid data={data} cellMergeMode={cellMergeMode} autoGenerate={false}>
    <IgrColumn field="OrderID" header="Order ID" merge={true}></IgrColumn>
    <IgrColumn field="ShipperName" header="Shipper Name" merge={true}></IgrColumn>
    <IgrColumn field="Salesperson" header="Salesperson"></IgrColumn>
</IgrTreeGrid>

const cellMergeMode: GridCellMergeMode = 'onSort';

この例では、グリッドは列がソートされている場合のみ結合を行い、Category 列と Product 列の両方で結合が有効になっています。

カスタム結合条件

always と onSort の組み込みモードに加えて、mergeStrategy プロパティを使用して独自の結合条件を定義することができます。このストラテジでは、セルの比較方法と結合範囲の計算方法の両方を制御します。

結合ストラテジクラス

カスタム結合ストラテジは GridMergeStrategy クラスを実装する必要があります:

merge - 結合されたセルをどのように生成するかを定義。
comparer - 隣接するレコードを結合すべきかを判定する条件を定義。

IgrTreeGrid には、IGridMergeStrategy を実装する 2 つの組み込みストラテジがあります: DefaultTreeGridMergeStrategy と ByLevelTreeGridMergeStrategy。DefaultTreeGridMergeStrategy は、階層レベルに関係なく同じ値を持つすべてのセルを結合します。ByLevelTreeGridMergeStrategy は、同じ階層レベルにあり、かつ同じ値を持つセルのみを結合します。同一階層レベルが結合の必須条件になります。

デフォルトのストラテジを拡張

一部の動作 (例: comparer ロジック) のみをカスタマイズしたい場合は、組み込みの DefaultTreeGridMergeStrategy または ByLevelTreeGridMergeStrategy のいずれかを拡張し、必要なメソッドのみをオーバーライドできます。

export class MyCustomStrategy extends IgrDefaultTreeGridMergeStrategy {
    /* Merge only cells within their respective projects */
    public override comparer(prevRecord: any, record: any, field: string): boolean {
        const a = prevRecord[field];
        const b = record[field];
        const projA = prevRecord['ProjectName'];
        const projB = record['ProjectName'];
        return a === b && projA === projB;
    }
}

カスタムストラテジの適用

定義したカスタムストラテジは、mergeStrategy プロパティを通じてグリッドに割り当てます。

<IgrTreeGrid data={data} mergeStrategy={customStrategy}>
  <IgrColumn field="ActionID" merge={true}></IgrColumn>
  <IgrColumn field="ProjectName" merge={true}></IgrColumn>
</IgrTreeGrid>

機能の統合

セル結合の特性上、他の機能との連携動作について以下の点に注意が必要です:

Excel エクスポート: 結合されたセルは、Excel にエクスポートしても結合状態が維持されます。
列のピン固定: 列がピン固定されてもセルの結合は維持され、ピン固定領域内に表示されます。
行のピン固定: セルは自身が属する領域内でのみ結合されます。つまり、ピン固定された行のセルはピン固定行のセル同士で、ピン固定されていない行のセルはその中でのみ結合されます。
ナビゲーション/アクティベーション: セルがアクティブになると、その行内の結合セルはすべて単一セルに分解されます。これはキーボードナビゲーションによるアクティベーションも含みます。

[!NOTE] 結合セルをクリックすると、結合シーケンス内でもっとも近いセルがアクティブになります。

更新/編集: アクティブ化によって結合シーケンスが分解されるため、編集モードになるのは単一セルのみです。
行の選択: 選択された行が結合セルと交差する場合、関連するすべての結合セルが選択対象としてマークされます。

API リファレンス

IgrTreeGrid

その他のリソース

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

React Tree Grid セル結合