Angular Grid 複数列ヘッダーの概要
IgxGrid は、共通の列ヘッダー下で行のグループ化が可能な複数列ヘッダーをサポートします。各複数列ヘッダーグループは、マテリアル UI グリッド内でその他複数のグループや列を組み合わせることができます。
Angular Grid 複数列ヘッダーの例
Multi-column header の宣言は列セットを igx-column-group コンポーネントと渡された header タイトルにラップして行います。
<igx-grid [data]="data" [allowFiltering]="true">
<igx-column-group header="Contact Information">
<igx-column sortable="true" resizable="true" field="Phone"></igx-column>
<igx-column sortable="true" resizable="true" field="Fax"></igx-column>
<igx-column sortable="true" resizable="true" field="PostalCode"></igx-column>
</igx-column-group>
</igx-grid>
ネスト ヘッダーの n-th レベルは、上記の宣言に従います。igx-column-group をネストしてください。
<igx-grid [data]="data" [allowFiltering]="true" [moving]="true">
<igx-column-group header="General Information">
<igx-column sortable="true" resizable="true" field="CompanyName"></igx-column>
<igx-column-group header="Person Details">
<igx-column [pinned]="false" sortable="true" resizable="true" field="ContactName"></igx-column>
<igx-column sortable="true" resizable="true" field="ContactTitle"></igx-column>
</igx-column-group>
</igx-column-group>
</igx-grid>
各 igx-column-group は、移動、ピン固定 と 非表示 をサポートします。
Note
列セットと列グループがある場合、ピン固定は列の一番上の親レベルでのみ可能です。ネストした column groups や columns のピン固定はできません。
複数列ヘッダーでのピン固定を使用すると、グループ全体がピン固定されることに注意してください。
columns と column groups 間の移動は、階層の同じレベルで同じ group の場合のみです。
columns/column-groups が現在の group でラップされない場合 (一番上のレベル columns の場合)、表示列全体の移動はできません。
<igx-grid [data]="data" [allowFiltering]="true" [moving]="true">
<igx-column-group [pinned]="true" header="General Information">
<igx-column sortable="true" resizable="true" field="CompanyName"></igx-column>
</igx-column-group>
<igx-column sortable="true" resizable="true" field="Phone"></igx-column>
<igx-column sortable="true" resizable="true" field="Fax"></igx-column>
<igx-column sortable="true" resizable="true" field="PostalCode"></igx-column>
</igx-grid>
複数列ヘッダー テンプレート
グリッドの各列グループは個別のテンプレートを持つことができます。列グループは、igxHeader ディレクティブで装飾された ng-template タグを必要とします。
ng-template は、列グループ オブジェクトと共にコンテキストとして提供されています。
...
<igx-column-group header="General Information">
<ng-template igxHeader let-columnGroup>
{{ columnGroup.header | uppercase }}
</ng-template>
...
</igx-column-group>
...
複数の列グループに対して単一のテンプレートを再利用する場合は、以下のように列グループの headerTemplate プロパティを設定できます。
<ng-template #columnGroupHeaderTemplate let-columnGroup>
{{ columnGroup.header | uppercase }}
</ng-template>
...
<igx-column-group header="General Information" [headerTemplate]="columnGroupHeaderTemplate">
...
</igx-column-group>
<igx-column-group header="Address Information" [headerTemplate]="columnGroupHeaderTemplate">
...
</igx-column-group>
...
Note
ヘッダーが再テンプレート化され、対応する列グループが移動可能な場合は、テンプレート要素で draggable 属性を false に設定する必要があり、これにより適用されるイベントをすべて処理できます。
<ng-template igxHeader>
<igx-icon [attr.draggable]="false" (click)="onClick()"></igx-icon>
</ng-template>
次のサンプルは、ヘッダー テンプレートを使用して折りたたみ可能な列グループを実装する方法を示しています。
スタイル設定
ソート動作のスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
最も単純なアプローチに従って、grid-theme を拡張する新しいテーマを作成し、$header-background、$header-text-color、$header-border-width、$header-border-style および $header-border-color パラメーターを受け取ります。
$custom-theme: grid-theme(
$header-background: #e0f3ff,
$header-text-color: #e41c77,
$header-border-width: 1px,
$header-border-style: solid,
$header-border-color: rgba(0, 0, 0, 0.08)
);
Note
上記のようにカラーの値をハードコーディングする代わりに、palette および color 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレットのトピックをご覧ください。
最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを含めることです。
@include css-vars($custom-theme);
デモ
Note
このサンプルは、Change Theme (テーマの変更) から選択したグローバル テーマに影響を受けません。
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub