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)
);

最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを含めることです。

@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 で複数列ヘッダーの Grid コンポーネントを使用するには、Angular アプリケーションの polyfill.ts に配列ポリフィルを明示的にインポートする必要があります。

  import 'core-js/es7/array';
  

API リファレンス

• IgxGridComponent
• IgxGridComponent スタイル
• IgxColumnGroupComponent

その他のリソース

• Grid 概要
• 仮想化とパフォーマンス
• ページング
• フィルタリング
• ソート
• 集計
• 列のサイズ変更
• 選択
• グループ化

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)