Angular Hierarchical Grid 複数列ヘッダーの概要
IgxHierarchicalGrid
は、共通の列ヘッダー下で行のグループ化が可能な複数列ヘッダー
をサポートします。各複数列ヘッダーグループは、マテリアル UI グリッド内でその他複数のグループや列を組み合わせることができます。
Angular Hierarchical Grid 複数列ヘッダーの例
Multi-column header
の宣言は列セットを igx-column-group
コンポーネントと渡された header
タイトルにラップして行います。
<igx-hierarchical-grid [data]="localdata" [moving]="true" [allowFiltering]="true">
<igx-column field="CustomerID" sortable="true" resizable="true"></igx-column>
<igx-column-group header="Address Information">
<igx-column-group header="Location">
<igx-column field="Address" sortable="true" resizable="true"></igx-column>
<igx-column field="City" sortable="true" resizable="true"></igx-column>
<igx-column field="PostalCode" sortable="true" resizable="true"></igx-column>
<igx-column field="Country" sortable="true" resizable="true"></igx-column>
</igx-column-group>
<igx-column-group header="Contact Information">
<igx-column field="Phone" sortable="true" resizable="true"></igx-column>
<igx-column field="Fax" sortable="true" resizable="true"></igx-column>
</igx-column-group>
</igx-column-group>
</igx-hierarchical-grid>
ネスト ヘッダーの n-th
レベルは、上記の宣言に従います。igx-column-group
をネストしてください。
<igx-hierarchical-grid [data]="localdata" [allowFiltering]="true" [moving]="true">
<igx-column field="CustomerID" sortable="true" resizable="true"></igx-column>
<igx-column-group [pinned]="false" header="General Information">
<igx-column field="CompanyName" sortable="true" resizable="true"></igx-column>
<igx-column-group header="Person Details">
<igx-column field="ContactName" sortable="true" resizable="true"></igx-column>
<igx-column field="ContactTitle" sortable="true" resizable="true"></igx-column>
</igx-column-group>
</igx-column-group>
</igx-hierarchical-grid>
各 igx-column-group
は、移動
、ピン固定
と 非表示
をサポートします。
Note
列セットと列グループがある場合、ピン固定は列の一番上の親レベルでのみ可能です。ネストした column groups
や columns
のピン固定はできません。
複数列ヘッダーでのピン固定を使用すると、グループ全体がピン固定されることに注意してください。
columns
と column groups
間の移動は、階層の同じレベルで同じ group
の場合のみです。
columns/column-groups
が現在の group
でラップされない場合 (一番上のレベル columns
の場合)、表示列全体の移動はできません。
<igx-hierarchical-grid [data]="localdata" [allowFiltering]="true" [moving]="true">
<igx-column field="CustomerID" sortable="true" resizable="true"></igx-column>
<igx-column-group [pinned]="false" header="General Information">
<igx-column field="CompanyName" sortable="true" resizable="true"></igx-column>
<igx-column-group header="Person Details">
<igx-column field="ContactName" sortable="true" resizable="true"></igx-column>
<igx-column field="ContactTitle" sortable="true" resizable="true"></igx-column>
</igx-column-group>
</igx-column-group>
...
</igx-hierarchical-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)
);
最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを含めることです。
@include grid($custom-theme);
Note
コンポーネントが Emulated
ViewEncapsulation を使用している場合、::ng-deep
を使用してこのカプセル化を解除する必要があります。
:host {
::ng-deep {
@include grid($custom-theme);
}
}
カラーパレットの定義
上記のように色の値をハードコーディングする代わりに、igx-palette
と igx-color
関数を使用することによって色に関してより高い柔軟性を持つことができます。
igx-palette
は渡された一次色と二次色に基づいてカラーパレットを生成します。
$light-blue-color: #e0f3ff;
$deep-pink-color: #e41c77;
$custom-palette: palette($primary: $light-blue-color, $deep-pink-color);
次に igx-color
を使用してパレットから簡単に色を取得できます。
$custom-theme: grid-theme(
$header-background: color($custom-palette, "primary", 500),
$header-text-color: color($custom-palette, "secondary", 500),
$header-border-width: 1px,
$header-border-style: solid,
$header-border-color: color($custom-palette, "grays", 200)
);
Note
igx-color
と igx-palette
は色の生成や取得のための関数です。使い方の詳細については パレット
のトピックをご覧ください。
スキーマの使用
テーマ エンジンを使用してスキーマの利点を活用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法です。
すべてのコンポーネントに提供されている 2 つの定義済みスキーマ (ここでは _light-grid
) の 1 つを拡張します。
// Extending the light grid schema
$custom-grid-schema: extend($_light-grid,
(
header-background: (igx-color:('primary', 500)),
header-text-color: (igx-color:('secondary', 500)),
header-border-width: 1px,
header-border-style: solid,
header-border-color: (igx-color:('grays', 200))
)
);
カスタム スキーマを適用するには、グローバル (light
または dark
) の 1 つを拡張する必要があります。これは基本的にカスタム スキーマでコンポーネントをポイントし、その後それぞれのコンポーネントテーマに追加するものです。
Extending the global light-schema
$my-custom-schema: extend($light-schema,
(
igx-grid: $custom-grid-schema
)
);
// Defining our custom theme with the custom schema
$custom-theme: grid-theme(
$palette: $custom-palette,
$schema: $my-custom-schema
);
上記と同じ方法でテーマを含める必要があることに注意してください。
デモ
Note
このサンプルは、「テーマの変更」から選択したグローバル テーマに影響を受けません。
既知の問題と制限
IE11 で複数列ヘッダーの Hierarchical Grid コンポーネントを使用するには、Angular アプリケーションの polyfill.ts に配列ポリフィルを明示的にインポートする必要があります。
import 'core-js/es7/array';