Grid 条件付きセルのスタイル設定

Ignite UI for Angular の IgxGrid コンポーネントは、カスタム条件に基づいて 2 通りの条件付きセルのスタイル設定をサポートします。

  • IgxColumnComponent を設定して、キーと値のペアを含むオブジェクト リテラルに cellClasses を入力します。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。その結果、セルのマテリアル スタイル設定が簡単にできます。
// component.ts file
public beatsPerMinuteClasses = {
    downFont: this.downFontCondition,
    upFont: this.upFontCondition
};
...

private downFontCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] <= 95;
}
// component.scss file
.upFont {
    color: red;
}

.downFont {
    color: green;
}

'cellClasses' を使用したデモ


  • IgxColumnComponent 入力を使用して、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取る cellStyles
public styles = {
    "background": "linear-gradient(180deg, #dd4c4c 0%, firebrick 100%)",
    "text-shadow": "1px 1px 2px rgba(25,25,25,.25)",
    "animation": "0.25s ease-in-out forwards alternate popin"
};

cellStylescellClasses の両方のコールバック シグネチャが次のように変更されました。

(rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean

'cellStyles' を使用したデモ


概要

cellClasses の使用

IgxColumnComponent cellClasses 入力を設定してカスタム条件を定義することにより、IgxGrid の条件付きセルのスタイルを設定できます。

<!-- sample.component.html -->
<igx-column field="BeatsPerMinute" dataType="number" [cellClasses]="beatsPerMinuteClasses"></igx-column>

cellClasses 入力は、キーと値のペアを含むオブジェクト リテラルを受け取ります。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。

// sample.component.ts

private upFontCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] > 95;
}

private downFontCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] <= 95;
}

public beatsPerMinuteClasses = {
    downFont: this.downFontCondition,
    upFont: this.upFontCondition
};
// sample.component.scss

::ng-deep {
    .upFont {
        color: green;
    }

    .downFont {
        color: red;
    }
}

::ng-deep または ViewEncapsulation.None を使用してカスタム スタイルを現在のコンポーネントとその子コンポーネントに適用します。

cellStyles の使用

列の cellStyles プロパティを公開。列セルの条件付きスタイリングが可能になりました。cellClasses と同様、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取ります。また、通常のスタイリングを簡単に適用できます (条件なし)。

上記のサンプルで作成した項目:

  • 列インデックスに基づいて適用される 2 つの異なるスタイル。
  • また、偶数/奇数行に基づいてテキストの色を変更します。

両方の cellStyles のコールバック署名は以下のとおりです。

(rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean

次にスタイルを定義します。

// component.ts
public oddColStyles = {
    background: "linear-gradient(to right, #b993d6, #8ca6db)",
    color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "white" : "gray",
    animation: "0.75s popin"
};

public evenColStyles = {
    background: "linear-gradient(to right, #8ca6db, #b993d6)",
    color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "gray" : "white",
    animation: "0.75s popin"
};

ngOnInit で、IgxGrid 列を動的に作成するために使用される事前定義 columns コレクションの各列に cellStyles 構成を追加します。

// component.ts
public ngOnInit() {
    this.data = athletesData;
    this.columns = [
        { field: "Id" },
        { field: "Position" },
        { field: "Name" },
        { field: "AthleteNumber" },
        { field: "CountryName" }
    ];

    this.applyCSS();
}

public applyCSS() {
    this.columns.forEach((column, index) => {
        column.cellStyles = (index % 2 === 0 ? this.evenColStyles : this.oddColStyles);
    });
}

public updateCSS(css: string) {
    this.oddColStyles = {...this.oddColStyles, ...JSON.parse(css)};
    this.evenColStyles = {...this.evenColStyles, ...JSON.parse(css)};
    this.applyCSS();
}
// component.html
<igx-grid
    #grid1 [data]="data"
    primaryKey="ID"
    width="80%"
    height="300px">
    <igx-column *ngFor="let c of columns"
        [field]="c.field"
        [header]="c.field"
        [cellStyles]="c.cellStyles">
    </igx-column>
</igx-grid>

popin アニメーションの定義

// component.scss
@keyframes popin {
    0% {
        opacity: 0.1;
        transform: scale(.75, .75);
        filter: blur(3px) invert(1);
    }

    50% {
        opacity: .5;
        filter: blur(1px);
    }

    100% {
        transform: scale(1, 1);
        opacity: 1;
        filter: none;
    }
}

既知の問題と制限

  • 他の列に同じ条件でバインドされたセルがある場合、その 1 つのセルが更新された際に条件が満たされて要る場合も他のセルが新しい値に基づいて更新されない問題。 残りのセルに変更を適用するには、パイプ チェックを実行する必要があります。以下の例は、onCellEdit イベントでスプレッド演算子...を使用してチェックを実行する方法を示します。これにより、元のオブジェクトが新しいインスタンスでコピーされ、パイプのみ発生します。
public backgroundClasses = {
    myBackground: (rowData: any, columnKey: string) => {
        return rowData.Col2 < 10;
    }
};
...

editDone(evt) {
    this.backgroundClasses = {...this.backgroundClasses};
}
<igx-grid #grid1 [data]="data" height="500px" width="100%" (onCellEdit)="editDone($event)">
  <igx-column field="Col1" dataType="number" [cellClasses]="backgroundClasses"></igx-column>
  <igx-column field="Col2" dataType="number" [editable]="true" [cellClasses]="backgroundClasses"></igx-column>
  <igx-column field="Col3" header="Col3" dataType="string" [cellClasses]="backgroundClasses"></igx-column>
  ...

API リファレンス

その他のリソース

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