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

    IgxGridsoportesmulti-column headers, que permite agrupar columnas colocándolas bajo un encabezado múltiple común. Cada grupo de cabeceras de varias columnas podría ser una representación de combinaciones entre otros grupos o columnas dentro de la cuadrícula de Material UI.

    Angular Grid Multi-column Headers Overview Example

    La declaración deMulti-column header podía lograrse envolviendo un conjunto de columnas enigx-column-group un componente conheader título aprobado.

    <igx-grid [data]="data" [allowFiltering]="true">
    <igx-column-group header="Contact Information">
        <igx-column sortable="true" resizable="true" field="Phone"></igx-column>
        <igx-column sortable="true" resizable="true" field="Fax"></igx-column>
        <igx-column sortable="true" resizable="true" field="PostalCode"></igx-column>
    </igx-column-group>
</igx-grid>

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

    <igx-grid [data]="data" [allowFiltering]="true" [moving]="true">
    <igx-column-group header="General Information">
        <igx-column sortable="true" resizable="true" field="CompanyName"></igx-column>
        <igx-column-group header="Person Details">
            <igx-column [pinned]="false" sortable="true" resizable="true" field="ContactName"></igx-column>
            <igx-column sortable="true" resizable="true" field="ContactTitle"></igx-column>
        </igx-column-group>
    </igx-column-group>
</igx-grid>

    Todosigx-column-group apoyanmoving,pinning yhiding.

    Note

    Cuando hay un conjunto de columnas y grupos de columnas, el fijamiento solo funciona para padres de columnas de nivel superior. Más concretamente, el anclaje porcolumn groups anidado ocolumns no está permitido.
    Ten en cuenta que al usar fijación con cabeceras multicolumna, todo el grupo queda fijado.
    Moverse entrecolumns ycolumn groups solo está permitido cuando están en el mismo nivel de la jerarquía y ambos están en la mismagroup.
    Cuandocolumns/column-groups no están envueltos por corrientegroup, es decir, están en el nivel columns superior, se permite moverse entre columnas visibles completas.

    <igx-grid [data]="data" [allowFiltering]="true" [moving]="true">
    <igx-column-group [pinned]="true" header="General Information">
        <igx-column sortable="true" resizable="true" field="CompanyName"></igx-column>
    </igx-column-group>
    <igx-column sortable="true" resizable="true" field="Phone"></igx-column>
    <igx-column sortable="true" resizable="true" field="Fax"></igx-column>
    <igx-column sortable="true" resizable="true" field="PostalCode"></igx-column>
</igx-grid>

    Multi-column Header Template

    Cada uno de los grupos de columnas de la cuadrícula puede ser plantillado por separado. El grupo de columnas espera unang-template etiqueta decorada con laigxHeader directiva. Seng-template le proporciona el objeto grupo de columnas como contexto.

    ...
<igx-column-group header="General Information">
    <ng-template igxHeader let-columnGroup>
        {{ columnGroup.header | uppercase }}
    </ng-template>
    ...
</igx-column-group>
...

    Si quieres reutilizar una sola plantilla para varios grupos de columnas, podrías establecer laheaderTemplate propiedad del grupo de columnas así:

    <ng-template #columnGroupHeaderTemplate let-columnGroup>
    {{ columnGroup.header | uppercase }}
</ng-template>

...
<igx-column-group header="General Information" [headerTemplate]="columnGroupHeaderTemplate">
    ...
</igx-column-group>
<igx-column-group header="Address Information" [headerTemplate]="columnGroupHeaderTemplate">
    ...
</igx-column-group>
...
    Note

    Si se cambia la plantilla de un encabezado de columna y el movimiento de la cuadrícula está habilitado, debe establecer el atributo arrastrable de la columna correspondiente en falso en los elementos de la plantilla, para que pueda manejar cualquiera de los eventos que se aplican.

    <ng-template igxHeader>
    <igx-icon [attr.draggable]="false" (click)="onClick()"></igx-icon>
</ng-template>

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

    Estilismo

    Para empezar a estilizar el comportamiento de ordenación, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mixin:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Siguiendo el enfoque más sencillo, creamos un nuevo tema que extiende ygrid-theme acepta los$header-background​$header-text-color​$header-border-width​$header-border-style​$header-border-color parámetros y los parámetros más sencillos.

    $custom-theme: grid-theme(
  $header-background: #e0f3ff,
  $header-text-color: #e41c77,
  $header-border-width: 1px,
  $header-border-style: solid,
  $header-border-color: rgba(0, 0, 0, 0.08)
);
    Note

    En lugar de codificar los valores de color como acabamos de hacer, podemos lograr mayor flexibilidad en cuanto a colores usando laspalette funciones ycolor. Por favor, consulta elPalettes tema para obtener una guía detallada sobre cómo utilizarlos.

    El último paso es incluir los mixins de componentes:

    @include css-vars($custom-theme);

    Demo

    Note

    La muestra no se verá afectada por el tema global seleccionado deChange Theme.

    API References

    Additional Resources

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