Web Components Hierarchical Grid 複数列ヘッダーの概要

    Web Components Hierarchical Grid の Ignite UI for Web Components 複数列ヘッダー機能は、共通の複数ヘッダーの下に配置することで列をグループ化できます。IgcHierarchicalGridComponent の各複数ヘッダー グループは、その他のグループや列を組み合わせて表示できます。この機能は、水平方向のスクロールが面倒な大規模なデータセットを扱う場合に特に役立ちます。

    Web Components Hierarchical Grid 複数列ヘッダーの例

    複数列ヘッダーの宣言は、一連の列を IgcColumnGroupComponent コンポーネントにラップし、IgcHeaderComponent タイトル情報を渡すことによって実現されます。

    <igc-hierarchical-grid auto-generate="false" name="hierarchicalGrid" id="hierarchicalGrid" primary-key="ID" moving="true" allow-filtering="true">
    <igc-column field="CustomerID" sortable="true" resizable="true"> </igc-column>
    <igc-column-group header="Address Information">
        <igc-column-group header="Location">
            <igc-column field="Address" sortable="true" resizable="true"></igc-column>
            <igc-column field="City" sortable="true" resizable="true"></igc-column>
            <igc-column field="PostalCode" sortable="true" resizable="true"></igc-column>
            <igc-column field="Country" sortable="true" resizable="true"></igc-column>
        </igc-column-group>
        <igc-column-group header="Contact Information">
            <igc-column field="Phone" sortable="true" resizable="true"></igc-column>
            <igc-column field="Fax" sortable="true" resizable="true"></igc-column>
        </igc-column-group>
    </igc-column-group>
</igc-hierarchical-grid>

    ネストしたヘッダーの n-th レベルは、上記の宣言に従います。したがって、IgcColumnGroupComponent をネストすることで、望ましい結果が得られます。

    <igc-hierarchical-grid auto-generate="false" name="hierarchicalGrid" id="hierarchicalGrid" primary-key="ID" moving="true" allow-filtering="true">
    <igc-column field="CustomerID" dataType="string" sortable="true" resizable="true"> </igc-column>
    <igc-column-group header="General Information">
        <igc-column field="CompanyName" dataType="string" sortable="true" resizable="true"></igc-column>
        <igc-column-group header="Person Details">
            <igc-column field="ContactName" dataType="string" sortable="true" resizable="true"></igc-column>
            <igc-column field="ContactTitle" dataType="string" sortable="true" resizable="true"></igc-column>
        </igc-column-group>
    </igc-column-group>
</igc-hierarchical-grid>

    すべての IgcColumnGroupComponent は、移動、ピン固定、および非表示をサポートしています。

    [!Note] 列セットと列グループがある場合、ピン固定は列の一番上の親レベルでのみ可能です。具体的には、ネストされた column groups または columns ごとのピン固定は許可されていません。
    columns と column groups 間の移動は、それらが階層内の同じレベルにあり、両方が同じ group にある場合にのみ許可されます。
    columns/column-groups が現在の group によってラップされていない場合 (一番上のレベル columns の場合)、表示されている列全体の間で移動が許可されます。

    <igc-hierarchical-grid auto-generate="false" name="hierarchicalGrid" id="hierarchicalGrid" primary-key="ID" moving="true" allow-filtering="true">
    <igc-column field="CustomerID" dataType="string" movable="true" pinned="true" sortable="true" resizable="true"> </igc-column>
    <igc-column-group movable="true" pinned="true" header="General Information">
        <igc-column field="CompanyName" dataType="string" sortable="true" resizable="true"></igc-column>
        <igc-column-group header="Person Details">
            <igc-column field="ContactName" dataType="string" sortable="true" resizable="true"></igc-column>
            <igc-column field="ContactTitle" dataType="string" sortable="true" resizable="true"></igc-column>
        </igc-column-group>
    </igc-column-group>
</igc-hierarchical-grid>

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

    グリッドの各列グループは個別のテンプレートを持つことができます。次のコード スニペットは、列グループの HeaderTemplate の使用方法を示しています:

    <igc-column-group id="addressInfo" header="Address Information">
</igc-column-group>

    constructor() {
    var addresss = this.addresss = document.getElementById('addressInfo') as IgcColumnGroupComponent;
    addresss.headerTemplate = this.columnGroupHeaderTemplate;
}

public columnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
    return html`
        ${ctx.column.header.toUpperCase()}
    `;
}

    複数の列グループに対して 1 つのテンプレートを再利用する場合は、列グループの HeaderTemplate プロパティを次のように設定できます:

    <igc-column-group id="generalInfo" header="General Information">
</igc-column-group>
<igc-column-group id="addressInfo" header="Address Information">
</igc-column-group>

    constructor() {
    var general = this.general = document.getElementById('generalInfo') as IgcColumnGroupComponent;
    var addresss = this.address = document.getElementById('addressInfo') as IgcColumnGroupComponent;
    general.headerTemplate = this.columnGroupHeaderTemplate;
    addresss.headerTemplate = this.columnGroupHeaderTemplate;
}

public columnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
    return html`
        ${ctx.column.header.toUpperCase()}
    `;
}

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

    public columnHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
    return html`
        <igc-icon draggable="false" @click="${() => this.onClick()}"></igc-icon>
    `;
}

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

    スタイル設定

    定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

    <igc-hierarchical-grid class="grid"></igc-hierarchical-grid>

    次に、そのクラスに関連する CSS プロパティを設定します。

    .grid {
    --ig-grid-header-background: #e0f3ff;
    --ig-grid-header-text-color: #e41c77;
    --ig-grid-header-border-width: 1px;
    --ig-grid-header-border-style: solid;
    --ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
}

    デモ

    API リファレンス

    その他のリソース

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