Angular Data Grid の縮小可能な列グループ

複数列ヘッダーを使用すると、複数レベルのネストされた列と列グループを使用できるため、各列グループを縮小可能としてマークできます。縮小可能な複数列ヘッダーでは、縮小/展開が可能です。現在のヘッダーの下にネストされたヘッダーを表示および非表示にします。これにより、たとえば短縮/要約された情報を示すことができます。

最速で機能豊富な Angular Data Grid は、ページング、ソート、フィルタリング、グループ化、PDF および Excel へのエクスポートなどの機能を提供します。究極のアプリ構築エクスペリエンスとデータ操作に必要なすべてが揃っています。

無料で試してみる

Angular グリッド列グループの縮小の例

EXAMPLE

MODULES

TS

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 { GridCollapsibleColumnGroupsComponent } from "./grid/grid-collapsible-columnGroups/grid-collapsible-column-groups.component";
import { 
	IgxGridModule,
	IgxTooltipModule
 } from "igniteui-angular";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



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

import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxGridComponent } from 'igniteui-angular';
import { INVOICE_DATA } from '../../data/invoiceData';

@Component({
    selector: 'app-grid-collapsible-column-groups',
    styleUrls: ['./grid-collapsible-column-groups.component.scss'],
    templateUrl: './grid-collapsible-column-groups.component.html'
})
export class GridCollapsibleColumnGroupsComponent implements OnInit {

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

    public ngOnInit() {
        this.data = INVOICE_DATA;
        for (const item of this.data) {
            const names = item.CustomerName.split(' ');
            item.FirstName = names[0];
            item.LastName = names[names.length - 1];
            item.FullAddress = `${item.Address}, ${item.City}, ${item.Country}`;
        }
    }
}
tsコピー

<div class="wrapper theme">
    <div class="sample-content">
        <div class="sample-column">
            <igx-grid [igxPreventDocumentScroll]="true" #grid [data]="data" [displayDensity]="'cosy'" height="550px">
                <igx-column-group header="Customer Information" [collapsible]="true">
                    <ng-template igxCollapsibleIndicator let-column="column">
                        <igx-icon [attr.draggable]="false" #target="tooltipTarget" [igxTooltipTarget]="tooltipRef"[showDelay]="0" [hideDelay]="0">{{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>
                        <div #tooltipRef="tooltip" igxTooltip>
                            <span *ngIf="column.expanded">The column is expanded! Click here to collapse</span>
                            <span [hidden]="column.expanded">The column is collapsed! Click here to expand</span>
                        </div>
                    </ng-template>
                    <igx-column field="CustomerName" header="Fullname" [dataType]="'string'" [visibleWhenCollapsed]="true"></igx-column>
                    <igx-column field="CustomerID" header="Customer ID" [dataType]="'string'" [visibleWhenCollapsed]="false"></igx-column>
                    <igx-column field="FirstName" header="First Name" [dataType]="'string'" [visibleWhenCollapsed]="false">
                    </igx-column>
                    <igx-column field="LastName" header="Last Name" [dataType]="'string'" [visibleWhenCollapsed]="false">
                    </igx-column>
                    <igx-column-group header="Customer Address" [collapsible]="true" [expanded]="false">
                        <ng-template igxCollapsibleIndicator let-column="column">
                            <igx-icon [attr.draggable]="false" #target="tooltipTarget" [igxTooltipTarget]="tooltipRef" [showDelay]="0" [hideDelay]="0">{{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>
                            <div #tooltipRef="tooltip" igxTooltip>
                                <span *ngIf="column.expanded">The column is expanded! Click here to collapse</span>
                                <span [hidden]="column.expanded">The column is collapsed! Click here to expand</span>
                            </div>
                        </ng-template>
                        <igx-column field="FullAddress" header="Full Address" [width]="'250px'" [dataType]="'string'" [sortable]="true" [visibleWhenCollapsed]="true">
                        </igx-column>
                        <igx-column field="Country" header="Country" [dataType]="'string'" [sortable]="true" [visibleWhenCollapsed]="false">
                        </igx-column>
                        <igx-column field="City" header="City" [dataType]="'string'" [sortable]="true"[visibleWhenCollapsed]="false">
                        </igx-column>
                        <igx-column field="Address" header="Address" [dataType]="'string'" [sortable]="true" [visibleWhenCollapsed]="false">
                        </igx-column>
                        <igx-column field="PostalCode" header="Postal Code" [dataType]="'string'" [sortable]="true" [visibleWhenCollapsed]="false">
                        </igx-column>
                    </igx-column-group>
                </igx-column-group>
                <igx-column field="ShipperName" header="Shipper Name" [dataType]="'string'" [sortable]="true">
                </igx-column>
                <igx-column field="OrderDate" header="Order Date" [dataType]="'date'" [sortable]="true">
                    <ng-template igxCell let-cell="cell" let-val>
                        {{val | date:'dd/MM/yyyy'}}
                    </ng-template>
                </igx-column>
                <igx-column-group header="Product Details" [collapsible]="true" [expanded]="false">
                    <ng-template igxCollapsibleIndicator let-column="column">
                        <igx-icon [attr.draggable]="false" #target="tooltipTarget" [igxTooltipTarget]="tooltipRef" [showDelay]="0" [hideDelay]="0">{{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>
                        <div #tooltipRef="tooltip" igxTooltip>
                            <span *ngIf="column.expanded">The column is expanded! Click here to collapse</span>
                            <span [hidden]="column.expanded">The column is collapsed! Click here to expand</span>
                        </div>
                    </ng-template>
                    <igx-column field="ProductName" header="Name" [dataType]="'string'" [sortable]="true"
                        [filterable]="false">
                    </igx-column>
                    <igx-column field="UnitPrice" header="Unit Price" dataType="number" [sortable]="true"[filterable]="false">
                    </igx-column>
                    <igx-column field="ProductID" header="ID" [dataType]="'string'" [sortable]="true" [visibleWhenCollapsed]="true"
                        [filterable]="false">
                    </igx-column>
                    <igx-column field="Quantity" header="Quantity" dataType="number" [sortable]="true" [filterable]="false" [visibleWhenCollapsed]="false">
                    </igx-column>
                    <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [sortable]="true" [visibleWhenCollapsed]="false">
                    </igx-column>
                </igx-column-group>
            </igx-grid>
        </div>
    </div>
</div>
htmlコピー

Edit in: CodesandboxStackBlitz

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

構成

IgxGrid および縮小可能な複数列ヘッダーを使用するには、まず以下のコマンドを入力して、Ignite UI for Angular をインストールする必要があります。

ng add igniteui-angular
cmd

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に app.module.ts ファイルに IgxGridModule をインポートします。そのため、複数列グループのトピックを簡単に確認することを強くお勧めします。グリッドで列グループを設定する方法の詳細情報を参照してください。

使用方法

縮小可能な列グループは複数列ヘッダー機能の一部で、列グループをより小さいデータ セットに縮小/展開する方法を提供します。列グループが縮小されると、列のサブセットがエンドユーザーに表示され、グループの他の子列が非表示になります。縮小された/展開された各列は、グリッド データソースにバインドすることも、非バインドにして計算することもできます。

列グループを collapsible に定義するには、プロパティを [collapsible]="true" に設定する必要があり、プロパティ visibleWhenCollapsed を少なくとも 2 つの子列に定義する必要があることに注意してください。グループが縮小されたときに少なくとも 1 列が表示され ([visibleWhenCollapsed]="true")、グループが展開されたときは少なくとも 1 列が非表示になります ([visibleWhenCollapsed]="false")。それ以外は、縮小機能は無効になります。子列の一部に visibleWhenCollapsed が指定されていない場合、この列は、親の状態が展開または縮小されているかに関係なく常に表示されます。

それでは、以下のマークアップを見てみましょう。

<igx-column-group header="Customer Information" [collapsible]="true"> <!-- Initially the column groups will be expanded--->
    <!--The column below will be visible when its parent is collapsed-->
    <igx-column field="CustomerName" header="Fullname" [dataType]="'string'" [visibleWhenCollapsed]="true"></igx-column>
    <!--The three columns below will be visible when its parent is expanded-->
    <igx-column field="CustomerID" header="Customer ID" [dataType]="'string'" [visibleWhenCollapsed]="false"></igx-column>
    <igx-column field="FirstName" header="First Name" [dataType]="'string'" [visibleWhenCollapsed]="false">
    </igx-column>
    <igx-column field="LastName" header="Last Name" [dataType]="'string'" [visibleWhenCollapsed]="false">
    </igx-column>
    <igx-column-group header="Customer Address"> <!--This column visibility will not be changed based on parent expand/collapsed state-->
        <igx-column field="Country" header="Country" [dataType]="'string'" [sortable]="true">
        </igx-column>
        <igx-column field="City" header="City" [dataType]="'string'" [sortable]="true">
        </igx-column>
    </igx-column-group>
</igx-column-group>
html

すべての子列にツリー状態があります。

• 親の展開状態に関係なく、常に表示できます。
• 親が展開されているときに表示できます。
• 親が縮小されているときに非表示にできます

縮小可能として指定されている列グループの初期状態は、[expanded]="true" です。ただし、プロパティ [expanded]="false" を設定することにより、この動作を簡単に変更できます。

展開 / 縮小インジケーター (ハンドル)

igxGrid のデフォルトの展開インジケーターは次のとおりです。

igxGrid のデフォルトの展開インジケーターは次のとおりです。

また、デフォルトの展開/縮小インジケーターを変更する必要がある場合は、入力プロパティまたはディレクティブを使用して、2 つの簡単な方法を提供します。

入力プロパティの使用

collapsibleIndicatorTemplate 入力プロパティを使用して、カスタムの展開/縮小テンプレートを定義し、それを各縮小可能な列グループに提供できます。以下のマークアップを確認してください。

<ng-template #indTemplate let-column="column">
    <igx-icon [attr.draggable]="false" >{{column.expanded ? 'remove' : 'add'}} </igx-icon>
</ng-template>
<igx-column-group header="Customer Information" [collapsible]="true" [collapsibleIndicatorTemplate]="indTemplate">
    <igx-column field="CustomerName" header="Fullname" [dataType]="'string'" [visibleWhenCollapsed]="true"></igx-column>
    <igx-column field="CustomerID" header="Customer ID" [dataType]="'string'" [visibleWhenCollapsed]="false"></igx-column>
    <igx-column-group header="Customer Address" [collapsible]="true" [collapsibleIndicatorTemplate]="indTemplate">
        <igx-column field="Country" header="Country" [dataType]="'string'" [sortable]="true" [visibleWhenCollapsed]="true"></igx-column>
        <igx-column field="City" header="City" [dataType]="'string'" [sortable]="true" [visibleWhenCollapsed]="false"></igx-column>
    </igx-column-group>
</igx-column-group>
html

igxCollapsibleIndicator ディレクティブの使用

この動作を実現する別の方法は、以下の例に示すように igxCollapsibleIndicator ディレクティブを使用することです。

<igx-column-group header="Customer Information" [collapsible]="true">
    <ng-template igxCollapsibleIndicator let-column="column">
        <igx-icon [attr.draggable]="false">{{column.expanded ? 'remove' : 'add'}} </<igx-icon>
    </ng-template>
    <igx-column field="CustomerName" header="Fullname" [dataType]="'string'" [visibleWhenCollapsed]="true"></igx-column>
    <igx-column field="CustomerID" header="Customer ID" [dataType]="'string'" [visibleWhenCollapsed]="false"></igx-column>
    <igx-column-group header="Customer Address" [collapsible]="true">
        <igx-column field="Country" header="Country" [dataType]="'string'" [sortable]="true" [visibleWhenCollapsed]="true"></igx-column>
        <igx-column field="City" header="City" [dataType]="'string'" [sortable]="true" [visibleWhenCollapsed]="false"></igx-column>
    </igx-column-group>
</igx-column-group>
html

プロパティを使用して列を非表示にすると宣言した場合、最初にグループを折りたたむオプションは非表示の列よりも優先されることに注意してください。 非表示で、同じ列が表示される場所にグループが定義されている場合、列が表示されます。

API リファレンス

• IgxColumnComponent
• IgxGridComponent
• IgxGridComponent スタイル

その他のリソース

• Grid の概要
• 仮想化とパフォーマンス
• ページング
• フィルタリング
• ソート
• 集計
• 列移動
• 列のピン固定
• 選択

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

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