Web Components Descripción general de los encabezados de varias columnas de cuadrícula jerárquica

La característica Ignite UI for Web Components Encabezados de varias columnas de Web Components cuadrícula jerárquica le permite agrupar columnas colocándolas debajo de un encabezado múltiple común. Cada grupo de encabezados de varias columnas podría IgcHierarchicalGridComponent ser una representación de combinaciones entre otros grupos o columnas. Esta característica es especialmente útil cuando se trata de grandes conjuntos de datos en los que el desplazamiento horizontal puede ser engorroso.

Web Components Hierarchical Grid Multi-Column Headers Example

La declaración de encabezados de varias columnas se logra encapsulando un conjunto de columnas en un IgcColumnGroupComponent componente con IgcHeaderComponent información de título pasada.

<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>

Para alcanzar n-th el nivel de encabezados anidados, se debe seguir la declaración anterior. Por lo tanto, el anidamiento IgcColumnGroupComponent conduce al resultado deseado.

<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>

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-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>

Multi-Column Header Template

Se puede crear una plantilla para cada uno de los grupos de columnas de la cuadrícula por separado. El siguiente fragmento de código demuestra cómo utilizar HeaderTemplate de un grupo de columnas:

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

Si desea volver a utilizar una sola plantilla para varios grupos de columnas, puede establecer la HeaderTemplate propiedad del grupo de columnas de la siguiente manera:

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

El siguiente ejemplo demuestra cómo implementar grupos de columnas contraíbles utilizando plantillas de encabezado.

Styling

Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

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

Luego establezca las propiedades CSS relacionadas con esta clase:

.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

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.