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

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

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

Topを指定すれば上部に、Bottomを指定すれば下部に固定できます。

<!-- app.component.html -->
<igx-grid [primaryKey]="'ID'"
    [pinning]='pinningConfig' ...>
    <!-- ... (中略) ... -->
</igx-grid>

// app.component.ts

// グリッドの上部に固定する場合
public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Top };

// グリッドの下部に固定する場合
public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom };

　

実行結果

　

サンプル

　

リファレンス

• 「Grid 行のピン固定」
  • https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid/row_pinning.html
• 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