IgxGrid 条件に応じてセルにスタイルを適用する

この KB は 製品バージョン 8.2.13 をベースにしています。

IgxGrid では、列の cellClasses プロパティを利用することで、特定の条件においてセルをスタイリングすることができます。

セルに適用するスタイル

::ng-deep {
  .short {
    color: red;
  }
}

スタイルの適用

IgxGrid のバインドデータに classes 要素を持つフィールドがあれば、IgxGrid の対応する列(IgxColumn)の cellClasses プロパティに cellTextClasses オブジェクトを割り当てます。

<igx-grid #grid1
  [data]="data"
  [primaryKey]="'ID'"
  [width]="'917px'" [height]="'334px'"
  [displayDensity]="'compact'">
    <igx-column *ngFor="let c of columns"
          [field]="c.field"
          [header]="c.headerText"
          ...
          [cellClasses] = "c.classes ? cellTextClasses : null">
    </igx-column>
</igx-grid>

export class AppComponent implements OnInit {
  title = 'igx-grid-cell-styles';
  ...
  cellTextClasses = {
    short: (rowData, columnKey, cellValue, rowIndex) => {
      return rowData[columnKey] < 20;
    }
  };

  ngOnInit() {
    // 列の定義
    this.columns = [
      { field: 'ID', headerText: 'ID', width: 100 },
      { field: 'ProductName', headerText: '商品名', width: 200 },
      { field: 'Supplier', headerText: '仕入れ先', width: 200 },
      { field: 'UnitPrice', headerText: '単価', width: 200 },
      { field: 'UnitsInStock', headerText: '在庫', width: 200, classes: this.cellTextClasses },
    ];
    // データ
    ...
  }
}

実行結果

「在庫」列の値が 20 以下のセルは、文字色に赤色が適用されます。

サンプル

リファレンス

• cellClasses プロパティ
  • https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellclasses

• IgxGrid 条件付きセルのスタイル設定
  • https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid/conditional_cell_styling.html