複数列ヘッダー

IgxGrid は、列ヘッダーの下に行を配置した行のグループ化が可能な multi-column headers をサポートします。各 column group は、その他のグループや列を組み合わせて表示できます。

デモ


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 は、movingpinninghiding をサポートします。

Note

列セットと列グループがある場合、ピン固定は一番上の列でのみ可能です。ネストされた各 column groups または columns のピン固定はできません。
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 まとめ

その他のリソース

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