Premium

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 プロパティを使用して独自の結合条件を定義することができます。このストラテジでは、セルの比較方法と結合範囲の計算方法の両方を制御します。

結合ストラテジクラス

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

export declare class IgrGridMergeStrategy {
    merge: (
        data: any[],
        field: string,
        comparer: (prevRecord: any, currentRecord: any, field: string) => boolean,
        result: any[],
        activeRowIndex?: number,
        grid?: GridType
    ) => any[];

    comparer: (prevRecord: any, record: any, field: string) => boolean;
}

The IgxTreeGrid provides two built-in strategies that implement the IGridMergeStrategy interface: IgrDefaultTreeGridMergeStrategy and IgrByLevelTreeGridMergeStrategy. IgrDefaultTreeGridMergeStrategy merges all cells with the same value, regardless of their hierarchical level. In contrast, IgrByLevelTreeGridMergeStrategy only merges cells if they have the same value and are located at the same level, making level a required condition for merging.

Extending the Default Strategy

If you only want to customize part of the behavior (for example, the comparer logic), you can extend one of the built-in strategies, either IgrDefaultTreeGridMergeStrategy or IgrByLevelTreeGridMergeStrategy, and override the relevant methods.

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;
    }
}

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

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

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

const customStrategy = new MyCustomStrategy() as IgrGridMergeStrategy;

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

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

Excel export: merged cells remain merged when exported to Excel.
Column pinning: cells remain merged when a column is pinned and are displayed in the pinned area.
Row pinning: cells merge only withing their containing area, i.e. cells of pinned rows merge only with cells of other pinned rows, while cells of unpinned rows merge only with cells of unpinned rows.
Updating/Editing: since activation breaks the merge sequence, only a single cell will be in edit mode.
Row selection: if selected rows intersect merged cells, all related merged cells should be marked as part of the selection.
Navigation/Activation: when a cell is active, all merged cells in the same row become single cells, i.e. their merge sequence is broken. This also includes activation via keyboard navigation.

If a merged cell is clicked, the closest cell from the merge sequence will become active.

API リファレンス

IgrTreeGrid

機能の統合

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

展開と縮小: マスター詳細、グループ化など、データ以外の行を生成する機能がある場合、その位置でセル結合が中断され、グループが分割されます。
Excel エクスポート: 結合されたセルは、Excel にエクスポートしても結合状態が維持されます。
列のピン固定: 列がピン固定されてもセルの結合は維持され、ピン固定領域内に表示されます。
行のピン固定: セルは自身が属する領域内でのみ結合されます。つまり、ピン固定された行のセルはピン固定行のセル同士で、ピン固定されていない行のセルはその中でのみ結合されます。
ナビゲーション/アクティベーション: セルがアクティブになると、その行内の結合セルはすべて単一セルに分解されます。これはキーボードナビゲーションによるアクティベーションも含みます。
更新/編集: アクティブ化によって結合シーケンスが分解されるため、編集モードになるのは単一セルのみです。
行の選択: 選択された行が結合セルと交差する場合、関連するすべての結合セルが選択対象としてマークされます。

React Tree Grid セル結合