IgxGrid には同じ値を持つ縦方向に隣接するセルを結合して表示する機能が実装されています。
既定では一致するデータを持つセルが自動的に結合されますが、カスタムの条件を設定して結合するように構成することも可能です。
ここでは、特定の列の値に基づいて結合を決定するストラテジを実装します。
既定の結合状態で以下のように表示されるグリッドがあります。
上下の値が一致するセルが結合されています。これを、一番左の「Shipper Name」列の値に基づいて結合を行うように変更します。
デフォルトのストラテジ DefaultMergeStrategy を以下のように拡張したクラス PerShipperMergeStrategy を作成します。
export class PerShipperMergeStrategy extends DefaultMergeStrategy {
public override comparer(prevRecord: any, record: any, field: string): boolean {
const a = prevRecord[field];
const b = record[field];
const shipperA = prevRecord['ShipperName'];
const shipperB = record['ShipperName'];
return a === b && shipperA === shipperB;
}
}
PerShipperMergeStrategy クラスのインスタンスを、IgxGrid の mergeStrategy プロパティに設定します。
public perShipperMergeStrategy = new PerShipperMergeStrategy();
<igx-grid ..... cellMergeMode="always" [mergeStrategy]="perShipperMergeStrategy"> ..... </igx-grid>
