IgxGrid 列固定の位置を指定する。

Ignite UI for Angular 9.1.2 バージョン時点での情報に基づいています。

Ignite UI for Angular 9.1では、IgxGridComponentにpinning入力プロパティが追加されました。これにより、グリッドの左か右かどちらに列を固定するかを設定できるようになりました。

Startを指定すれば左側に、Endを指定すれば右側に固定できます。

// app.component.ts

// グリッドの左側に固定する場合
public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.Start };

// グリッドの右側に固定する場合
public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };

　

実行結果

　

サンプル

　

リファレンス

• 「Grid 列ピン固定」→「ピン固定の位置」
  • https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid/column_pinning.html#%E3%83%94%E3%83%B3%E5%9B%BA%E5%AE%9A%E3%81%AE%E4%BD%8D%E7%BD%AE
• pinningプロパティ
  • https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#pinning
• 「インターフェイス IPinningConfig」
  • https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ipinningconfig.html