Web Components Tree Grid Multi-Column Headers Overview

The Ignite UI for Web Components Multi-Column Headers feature in Web Components Tree Grid allows you to group columns by placing them under a common multi-header. Each multi-column headers group in the IgcTreeGridComponent could be a representation of combinations between other groups or columns. This feature is particularly useful when dealing with large datasets where scrolling horizontally might be cumbersome.

Web Components Tree Grid Multi-Column Headers Example

A declaração de cabeçalhos de múltiplas colunas é obtida encapsulando um conjunto de colunas em um componente IgcColumnGroupComponent com informações de título IgcHeaderComponent passadas.

<igc-tree-grid primaryKey="ID" foreignKey="ParentID">
    <igc-column-group header="Contact Information">
        <igc-column field="Phone" data-type="String" sortable="true" resizable="true"></igc-column>
        <igc-column field="Fax" data-type="String" sortable="true" resizable="true"></igc-column>
        <igc-column field="PostalCode" data-type="String" sortable="true" resizable="true"></igc-column>
    </igc-column-group>
</igc-tree-grid>

Para atingir o nível n-th de cabeçalhos aninhados, a declaração acima deve ser seguida. Então, aninhar IgcColumnGroupComponent leva ao resultado desejado.

<igc-tree-grid primary-key="ID" foreign-key="ParentID" moving="true">
    <igc-column-group pinned="false" header="General Information">
        <igc-column field="HireDate" data-type="date" sortable="true" resizable="true"></igc-column>
        <igc-column-group header="Person Details">
            <igc-column field="ID" data-type="number" resizable="true" filterable="false"></igc-column>
            <igc-column field="Title" data-type="string" sortable="true" resizable="true"></igc-column>
            <igc-column field="Age" data-type="number" sortable="true" resizable="true"></igc-column>
        </igc-column-group>
    </igc-column-group>
</igc-tree-grid>

Every IgcColumnGroupComponent supports moving, pinning and hiding.

[!Note] When there is a set of columns and column groups, pinning works only for top level column parents. More specifically pinning per nested column groups or columns is not allowed.
Moving between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group.
When columns/column-groups are not wrapped by current group which means they are top level columns, moving is allowed between whole visible columns.

<igc-tree-grid primary-key="ID" foreign-key="ParentID" moving="true">
    <igc-column-group header="Contact Information">
        <igc-column field="Phone" data-type="String" sortable="true" resizable="true"></igc-column>
    </igc-column-group>
    <igc-column field="Name" data-type="String" sortable="true" resizable="true"></igc-column>
    <igc-column field="Title" data-type="String" sortable="true" resizable="true"></igc-column>
    <igc-column field="Age" data-type="Number" sortable="true" resizable="true"></igc-column>
</igc-tree-grid>

Multi-Column Header Template

Cada um dos grupos de colunas da grade pode ser modelado separadamente. O seguinte trecho de código demonstra como usar o HeaderTemplate de um grupo de colunas:

<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()}
    `;
}

Se você quiser reutilizar um único modelo para vários grupos de colunas, poderá definir a propriedade HeaderTemplate do grupo de colunas assim:

<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] If a header is re-templated and the corresponding column group is movable, you have to set the draggable attribute to false on the templated elements, so that you can handle any of the events that are applied!

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

O exemplo a seguir demonstra como implementar grupos de colunas recolhíveis usando modelos de cabeçalho.

Styling

Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir uma classe para a grade primeiro:

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

Em seguida, defina as propriedades CSS relacionadas a esta classe:

.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);
}

Demo

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.