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

    La función Ignite UI for Web Components de Cabeceras Multicolumna en Web Components Grid permite agrupar columnas colocándolas bajo un encabezado múltiple común. Cada grupo de cabeceras de varias columnas en elIgcGridComponent podría ser una representación de combinaciones entre otros grupos o columnas. Esta función es especialmente útil al tratar con grandes conjuntos de datos donde desplazarse horizontalmente puede resultar engorroso.

    Web Components Grid Multi-Column Headers Example

    La declaración de cabeceras de varias columnas se consigue envolviendo un conjunto de columnas en uncolumnGroup componente conheader la información del título pasada.

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

    Para alcanzarn-th el nivel de encabezados anidados, debe seguirse la declaración anterior. Así que anidarcolumnGroup conduce al resultado deseado.

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

    TodoscolumnGroup apoyan moverse, inmovilizar y esconderse.

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

    Multi-Column Header Template

    Cada uno de los grupos de columnas de la cuadrícula puede ser plantillado por separado. El siguiente fragmento de código demuestra cómo usar elheaderTemplate 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 quieres reutilizar una sola plantilla para varios grupos de columnas, podrías establecer laheaderTemplate propiedad del grupo de columnas así:

    <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-grid class="grid"></igc-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.