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

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

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

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

<igc-grid allow-filtering="true">
    <igc-column-group header="Contact Information">
        <igc-column sortable="true" resizable="true" field="Phone"></igc-column>
        <igc-column sortable="true" resizable="true" field="Fax"></igc-column>
        <igc-column sortable="true" resizable="true" field="PostalCode"></igc-column>
    </igc-column-group>
</igc-grid>

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

<igc-grid height="600px" allow-filtering="true">
    <igc-column-group header="General Information">
        <igc-column movable="true" sortable="true" resizable="true" field="CompanyName"></igc-column>
        <igc-column-group movable="true" header="Person Details">
            <igc-column movable="true" pinned="false" sortable="true" resizable="true" field="ContactName"></igc-column>
            <igc-column movable="true" sortable="true" resizable="true" field="ContactTitle"></igc-column>
        </igc-column-group>
    </igc-column-group>
</igc-grid>

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

<igc-grid height="600px" allow-filtering="true">
    <igc-column-group  movable="true" pinned="true" header="General Information">
        <igc-column movable="true" sortable="true" resizable="true" field="CompanyName"></igc-column>
    </igc-column-group>
    <igc-column sortable="true" resizable="true" field="Phone"></igc-column>
    <igc-column sortable="true" resizable="true" field="Fax"></igc-column>
    <igc-column sortable="true" resizable="true" field="PostalCode"></igc-column>
</igc-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()}
    `;
}

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

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

スタイル設定

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

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

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

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

デモ

API リファレンス

その他のリソース

• Grid の概要
• 仮想化とパフォーマンス
• ページング
• フィルタリング
• ソート
• 集計
• 列のサイズ変更
• 選択
• グループ化

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

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