Premium

React Grid セル結合

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

React Grid セル結合の例

セル結合の有効化と使用

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

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

グリッド結合モード

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

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

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

const cellMergeMode: GridCellMergeMode = 'always';

列結合のトグル

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

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

上記の例では:

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

組み合わせた例

<IgrGrid 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>
</IgrGrid>

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

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

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

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

export class MyCustomStrategy extends IgrDefaultMergeStrategy {
    /* 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 プロパティを通じてグリッドに割り当てます:

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

const customStrategy = new MyCustomStrategy() as IgrGridMergeStrategy;

機能の統合

結合されたセルには特有の動作があるため、グリッドの他の機能と具体的にどのように連携するかに注意が必要です:

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

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

制限

既知の制限	説明
セルの結合は、複数行レイアウトとの組み合わせではサポートされません。	両方とも複雑なレイアウトを使用するため、同時に使用することはできません。このような無効な構成が検出された場合は警告が表示されます。

API リファレンス

IgrGrid CellMergeMode GridCellMergeMode IgrGridMergeStrategy IgrDefaultMergeStrategy

その他のリソース

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

React Grid セル結合