Components List

Angular Grid 複数列ヘッダーの概要

IgxGrid は、共通の列ヘッダー下で行のグループ化が可能な複数列ヘッダーをサポートします。各複数列ヘッダーグループは、マテリアル UI グリッド内でその他複数のグループや列を組み合わせることができます。

Angular Grid 複数列ヘッダーの例

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { GridMultiColumnHeadersComponent } from "./grid/multi-column-headers/multi-column-headers";
import { 
	IgxGridModule,
	IgxButtonModule
 } from "igniteui-angular";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	GridMultiColumnHeadersComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxGridModule,
	IgxButtonModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, ViewChild } from '@angular/core';
import { GridSelectionMode, IgxGridComponent } from 'igniteui-angular';
import { DATA } from '../../data/customers';

@Component({
    selector: 'app-multi-column-headers',
    styleUrls: [ 'multi-column-headers.scss' ],
    templateUrl: 'multi-column-headers.html'
})
export class GridMultiColumnHeadersComponent {

    @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
    public grid: IgxGridComponent;
    public data = DATA;
    public selectionMode: GridSelectionMode = 'none';
    public pinGroup() {
        const firstColumnGroup = this.grid.columnList.filter((c) => c.header === 'General Information')[0];
        firstColumnGroup.pinned = !firstColumnGroup.pinned;
    }

    public hideGroup() {
        const firstColumnGroup = this.grid.columnList.filter((c) => c.header === 'General Information')[0];
        firstColumnGroup.hidden = !firstColumnGroup.hidden;
    }
}
ts

<div class="grid__wrapper">
    <igx-grid [igxPreventDocumentScroll]="true" [rowSelection]="selectionMode" #grid height="480px" [data]="data" [moving]="true" displayDensity="compact" [allowFiltering]="true">
        <igx-column [resizable]="true" field="ID" [filterable]="false"></igx-column>
        <igx-column-group [pinned]="false" header="General Information">
            <igx-column [sortable]="true" [resizable]="true" field="CompanyName"></igx-column>
            <igx-column-group header="Personal 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-column-group header="Address Information">
            <igx-column-group header="Location">
                <igx-column [sortable]="true" [resizable]="true" field="Country"></igx-column>
                <igx-column [sortable]="true" [resizable]="true" field="Region"></igx-column>
                <igx-column [sortable]="true" [resizable]="true" field="City"></igx-column>
                <igx-column [sortable]="true" [resizable]="true" field="Address"></igx-column>
            </igx-column-group>
            <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-column-group>
    </igx-grid>

    <section class="button-section">
        <button igxButton="raised" (click)="pinGroup()">Pin first group</button>
        <button igxButton="raised" (click)="hideGroup()">Hide first group</button>
    </section>
html

.grid__wrapper {
    margin: 16px;
}

.igx-button--raised {
    margin-top: 5px;
    margin-right: 5px;
}
scss

このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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>
html

ネストヘッダーの 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>
html

各 igx-column-group は、移動、ピン固定 と 非表示 をサポートします。

列セットと列グループがある場合、ピン固定は列の一番上の親レベルでのみ可能です。ネストした 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>
html

複数列ヘッダーテンプレート

グリッドの各列グループは個別のテンプレートを持つことができます。列グループは、igxHeader ディレクティブで装飾された ng-template タグを必要とします。 ng-template は、列グループオブジェクトと共にコンテキストとして提供されています。

...
<igx-column-group header="General Information">
    <ng-template igxHeader let-columnGroup>
        {{ columnGroup.header | uppercase }}
    </ng-template>
    ...
</igx-column-group>
...
html

複数の列グループに対して単一のテンプレートを再利用する場合は、以下のように列グループの 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>
...
html

ヘッダーが再テンプレート化され、対応する列グループが移動可能な場合は、テンプレート要素で draggable 属性を false に設定する必要があり、これにより適用されるイベントをすべて処理できます。

<ng-template igxHeader>
    <igx-icon [attr.draggable]="false" (click)="onClick()"></igx-icon>
</ng-template>
html

次のサンプルは、ヘッダーテンプレートを使用して折りたたみ可能な列グループを実装する方法を示しています。

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { GridMultiColumnHeaderTemplateComponent } from "./grid/multi-column-header-template/multi-column-header-template";
import { IgxGridModule } from "igniteui-angular";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	GridMultiColumnHeaderTemplateComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxGridModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, ViewChild } from '@angular/core';
import { GridSelectionMode, IgxColumnGroupComponent, IgxGridComponent } from 'igniteui-angular';
import { DATA } from '../../data/customers';

@Component({
    selector: 'app-multi-column-header-template',
    styleUrls: [ 'multi-column-header-template.scss' ],
    templateUrl: 'multi-column-header-template.html'
})
export class GridMultiColumnHeaderTemplateComponent {

    @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
    public grid: IgxGridComponent;
    public data: any[] = DATA;
    public columnGroupStates = new Map<IgxColumnGroupComponent, boolean>();
    public selectionMode: GridSelectionMode = 'multiple';

    constructor() {
        for (const item of this.data) {
            item.Location = `${item.Address}, ${item.City}, ${item.Country}`;
        }
    }

    public toggleColumnGroup(columnGroup: IgxColumnGroupComponent) {
        const columns = columnGroup.children.toArray();

        if (columnGroup.header === 'General Information') {
            const col = columns[1];
            col.hidden = !col.hidden;
        } else if (columnGroup.header === 'Address Information') {
            for (const col of columns) {
                col.hidden = !col.hidden;
            }
        }

        this.columnGroupStates.set(columnGroup, !this.columnGroupStates.get(columnGroup));
    }
}
ts

<div class="grid__wrapper">
    <ng-template #columnGroupTemplate let-col>
        <div class="column-group-template__container">
            <igx-icon [attr.draggable]="false"
                      (click)="toggleColumnGroup(col)"
                      class="column-group-template__icon">
                      {{columnGroupStates.get(col) ? 'expand_more' : 'expand_less'}}</igx-icon>
            {{col.header}}
        </div>
    </ng-template>

    <igx-grid [igxPreventDocumentScroll]="true" [rowSelection]="selectionMode" #grid height="500px" [moving]="true" [data]="data" displayDensity="compact" [allowFiltering]="true">
        <igx-column [resizable]="true" field="ID" [filterable]="false"></igx-column>
        <igx-column-group [pinned]="false" header="General Information" [headerTemplate]="columnGroupTemplate">
            <igx-column [sortable]="true" [resizable]="true" field="CompanyName"></igx-column>
            <igx-column-group header="Personal 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-column-group header="Address Information" [headerTemplate]="columnGroupTemplate">
            <igx-column [sortable]="true" [resizable]="true" field="Location" [hidden]="true"></igx-column>
            <igx-column [sortable]="true" [resizable]="true" field="Phone" [hidden]="true"></igx-column>
            <igx-column-group header="Location">
                <igx-column [sortable]="true" [resizable]="true" field="Country"></igx-column>
                <igx-column [sortable]="true" [resizable]="true" field="Region"></igx-column>
                <igx-column [sortable]="true" [resizable]="true" field="City"></igx-column>
                <igx-column [sortable]="true" [resizable]="true" field="Address"></igx-column>
            </igx-column-group>
            <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-column-group>
    </igx-grid>
</div>
html

.grid__wrapper {
    margin: 16px;
}

.column-group-template__container {
    display: flex; 
    align-items: center;
}

.column-group-template__icon {
    cursor: pointer;
}scss

スタイル設定

ソート動作のスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

最も単純なアプローチに従って、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)
);
scss

上記のようにカラーの値をハードコーディングする代わりに、palette および color 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレットのトピックをご覧ください。

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

@include css-vars($custom-theme);
scss

デモ

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { GridMultiColumnHeadersStylingComponent } from "./grid/multi-column-headers-styling/multi-column-headers-styling.component";
import { 
	IgxGridModule,
	IgxButtonModule
 } from "igniteui-angular";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	GridMultiColumnHeadersStylingComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxGridModule,
	IgxButtonModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, ViewChild } from '@angular/core';
import { IgxGridComponent } from 'igniteui-angular';
import { DATA } from '../../data/customers';

@Component({
    selector: 'app-multi-column-headers-styling',
    styleUrls: [ './multi-column-headers-styling.component.scss' ],
    templateUrl: './multi-column-headers-styling.component.html'
})
export class GridMultiColumnHeadersStylingComponent {

    @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
    public grid: IgxGridComponent;
    public data = DATA;
}
ts

<div class="grid__wrapper">
    <igx-grid [igxPreventDocumentScroll]="true" #grid height="470px" [data]="data" displayDensity="compact">
        <igx-column field="ID"></igx-column>
        <igx-column-group header="General Information">
            <igx-column field="CompanyName"></igx-column>
            <igx-column-group header="Personal Details">
                <igx-column field="ContactName"></igx-column>
                <igx-column field="ContactTitle"></igx-column>
            </igx-column-group>
        </igx-column-group>
        <igx-column-group header="Address Information">
            <igx-column-group header="Location">
                <igx-column field="Country"></igx-column>
                <igx-column field="Region"></igx-column>
                <igx-column field="City"></igx-column>
                <igx-column field="Address"></igx-column>
            </igx-column-group>
            <igx-column-group header="Contact Information">
                <igx-column field="Phone"></igx-column>
                <igx-column field="Fax"></igx-column>
                <igx-column field="PostalCode"></igx-column>
            </igx-column-group>
        </igx-column-group>
        <igx-column-group header="Address Information">
            <igx-column-group header="Location">
                <igx-column field="Country"></igx-column>
                <igx-column field="Region"></igx-column>
                <igx-column field="City"></igx-column>
                <igx-column field="Address"></igx-column>
            </igx-column-group>
            <igx-column-group header="Contact Information">
                <igx-column field="Phone"></igx-column>
                <igx-column field="Fax"></igx-column>
                <igx-column field="PostalCode"></igx-column>
            </igx-column-group>
        </igx-column-group>
        <igx-column-group header="Contact Information">
            <igx-column field="Phone"></igx-column>
            <igx-column field="Fax"></igx-column>
            <igx-column field="PostalCode"></igx-column>
        </igx-column-group>
    </igx-grid>
html

@use '../../../variables' as *;

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

:host ::ng-deep {
	@include css-vars($custom-theme);
}

.grid__wrapper {
    margin: 16px;
}
scss

このサンプルは、Change Theme (テーマの変更) から選択したグローバルテーマに影響を受けません。

API リファレンス

その他のリソース

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