IgxGrid 表示密度を変更する

IgxGrid では、セルやヘッダの表示間隔を調整することができます。デフォルトの状態では、ヘッダやセルなどの UI 要素に対して Material Design に準拠した空間的余裕が与えられています。ただし、状況によっては、この空間的余裕を減らしたい、なくしたい状況があります。IgxGrid では、displayDensity オプションを利用することでこのようなシナリオに対応することができます。

以下、displayDensity オプションの取れる値です。

compact・・・余白が少ない
cosy・・・compact と comfortable の中間
comfortable・・・余白が多い(デフォルト値)

続いて、displayDensity オプションの切り替え実装例です。

app.component.ts

densityCompact() {
  this.density = DisplayDensity.compact;
  // this.density = 'compact'; でも同じ
}

densityCosy() {
  this.density = DisplayDensity.cosy;
  // this.density = 'cosy'; でも同じ
}

densityComfortable() {
  this.density = DisplayDensity.comfortable;
  // this.density = 'comfortable'; でも同じ
}

app.component.html (一部抜粋)

<igx-grid #grid1 [data]="data"
  [width]="'1100px'" [height]="'450px'"
  [displayDensity]="density">
    ...
</igx-grid>

実行結果