Angular Grid 条件付きスタイル設定

IgxGrid コンポーネントでカスタム スタイルを提供する必要がある場合は、行レベルまたはセル レベルで行うことができます。

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

Ignite UI for Angular の IgxGrid コンポーネントは、カスタム ルールに基づいて行の条件付きスタイル設定を作成する次の 2 つの方法を提供します:

• IgxGrid コンポーネントで rowClasses 入力を設定する方法。
• IgxGrid コンポーネントで rowStyles 入力を設定する方法。

さらにこのトピックでは、両方について詳しく説明します。

rowClasses の使用

rowClasses 入力を設定し、カスタム ルールを定義することで、IgxGrid 行のスタイルを条件付きで設定できます。

<!-- sample.component.html -->
<igx-grid #grid [data]="data" [height]="'600px'" [width]="'100%'" [rowClasses]="rowClasses">
    ...
</igx-grid>

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

// sample.component.ts

public rowClasses = {
    activeRow: this.activeRowCondition
};

public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index;

// sample.component.scss

::ng-deep {
 .activeRow {
    border: 2px solid #fc81b8;
    border-left: 3px solid #e41c77;
 }
}

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

デモ

rowStyles の使用

列は、データ行の条件付きスタイル設定を可能にする rowStyles プロパティを公開するようになりました。rowClasses と同様、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取ります。また、通常のスタイル設定 (条件なし) を適用することもできます。

rowStyles と rowClasses の両方のコールバック署名は次のとおりです:

(row: RowType) => boolean

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

// component.ts
public rowStyles = {
    background: (row: RowType) => (+row.data['Change'] < 0  && +row.data['Change On Year(%)'] < 0) ? '#FF000088' : '#00000000',
    border: (row: RowType) => (+row.data['Change'] < 0  && +row.data['Change On Year(%)'] < 0) ? '2px solid' : '1px solid',
    'border-color': (row: RowType) => (+row.data['Change'] < 0  && +row.data['Change On Year(%)'] < 0) ? '#FF000099' : '#E9E9E9'
};

<!-- sample.component.html -->
<igx-grid #grid1 [data]="data | async" [height]="'500px'" width="100%"
        [autoGenerate]="false" [allowFiltering]="true" [rowStyles]="rowStyles">
    ...
</igx-grid>

デモ

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 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 を使用してカスタム スタイルを現在のコンポーネントとその子コンポーネントに適用します。

デモ

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

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

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

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>
</igx-grid>

API リファレンス

• IgxColumnComponent
• IgxGridComponent
• IgxGridComponent スタイル

その他のリソース

• Grid 概要
• 仮想化とパフォーマンス
• 編集
• ページング
• フィルタリング
• ソート
• 集計
• 列の移動
• 列のピン固定
• 列のサイズ変更
• 列の非表示
• 選択
• 検索
• ツールバー
• 複数行ヘッダー
• サイズ (表示密度)

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)