Visão geral dos cabeçalhos de várias colunas do Angular Grid

    IgxGridsuportesmulti-column headers que permitem agrupar colunas colocando-as sob múltiplos cabeçalhos comuns. Cada grupo de cabeçalhos com múltiplas colunas pode ser uma representação de combinações entre outros grupos ou colunas dentro da grade Material UI.

    Angular Grid Multi-column Headers Overview Example

    A declaração deMulti-column header poderia ser alcançada envolvendo um conjunto de colunas emigx-column-group um componente comheader título aprovado.

    <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 alcançarn-th o nível de cabeçalhos aninhados, a declaração acima deve ser seguida. Então, ao aninharigx-column-group leva ao resultado desejado.

    <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 apoiammoving,pinning ehiding.

    Note

    Quando há um conjunto de colunas e grupos de colunas, o pinning funciona apenas para pais de colunas de nível superior. Mais especificamente, fixar por cada aninhadocolumn groups oucolumns não é permitido.
    Por favor, note que, ao usar fixação com cabeçalhos multi-colunas, todo o Grupo é fixado.
    Mover-se entrecolumns ecolumn groups só é permitido quando eles estão no mesmo nível da hierarquia e ambos estão na mesmagroup linha.
    Quandocolumns/column-groups não são enrolados pela correntegroup, o que significa que estão no nível columns superior, é permitido mover-se entre colunas visíveis inteiras.

    <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 um dos grupos de colunas da grade pode ser templateado separadamente. O grupo de colunas espera umang-template etiqueta decorada com aigxHeader diretiva. Ong-template é fornecido com o objeto do grupo de colunas como contexto.

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

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

    <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

    Se um cabeçalho de coluna for remodelado e a movimentação da grade estiver habilitada, você terá que definir o atributo arrastável da coluna correspondente como false nos elementos modelados, para que você possa lidar com qualquer um dos eventos aplicados!

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

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

    Estilização

    Para começar a estilizar o comportamento de ordenação, precisamos importar oindex arquivo, onde todas as funções de tema e mixins de componentes estão ativados:

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

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

    Seguindo a abordagem mais simples, criamos um novo tema que estende egrid-theme aceita os$header-background parâmetros,$header-text-color,$header-border-width,e$header-border-style​$header-border-color​

    $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

    Em vez de codificar os valores de cor como acabamos de fazer, podemos alcançar maior flexibilidade em termos de cores usando aspalette funções e.color Por favor, consulte oPalettes tópico para orientações detalhadas sobre como usá-los.

    A última etapa é incluir os mixins de componentes:

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

    Demo

    Note

    A amostra não será afetada pelo tema global selecionado deChange Theme.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.