Grid 複数列ヘッダーの概要

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

デモ


Multi column header の宣言は列セットを igx-column-group コンポーネントと渡された header タイトルにラップして行います。

<igx-grid [data]="data" height="600px" [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" height="600px" [allowFiltering]="true">
    <igx-column-group header="General Information">
        <igx-column [movable]="true" sortable="true" resizable="true" field="CompanyName"></igx-column>
        <igx-column-group [movable]="true" header="Person Details">
            <igx-column [movable]="true" [pinned]="false" sortable="true" resizable="true" field="ContactName"></igx-column>
            <igx-column [movable]="true" sortable="true" resizable="true" field="ContactTitle"></igx-column>
        </igx-column-group>
    </igx-column-group>
</igx-grid>

igx-column-group は、moving, pinninghiding をサポートします。

Note

列セットと列グループがある場合、ピン固定は列の一番上の親レベルでのみ可能です。ネストした column groupscolumns のピン固定はできません。
columnscolumn groups 間の移動は、階層の同じレベルで同じ group の場合のみです。
Columns/column-groups が現在の group でラップされない場合 (一番上のレベル columns の場合)、表示列全体の移動はできません。

<igx-grid [data]="data" height="600px" [allowFiltering]="true">
    <igx-column-group  [movable]="true" [pinned]="true" header="General Information">
        <igx-column [movable]="true" 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>

API リファレンス

その他のリソース

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