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

    IgxGrid suporta multi-column headers que permite agrupar colunas colocando-as sob vários cabeçalhos comuns. Cada grupo de cabeçalhos de várias colunas pode ser uma representação de combinações entre outros grupos ou colunas na grade da interface do usuário do material.

    Angular Grid Multi-column Headers Overview Example

    A declaração de Multi-column header pode ser obtida envolvendo um conjunto de colunas em igx-column-group um componente com header o título passado.

    <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 atingir n-th o nível de cabeçalhos aninhados, a declaração acima deve ser seguida. Portanto, o aninhamento igx-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>

    Todos os igx-column-group suportes moving, pinning e hiding.

    Note

    Quando há um conjunto de colunas e grupos de colunas, a fixação funciona apenas para pais de coluna de nível superior. Mais especificamente, a fixação por aninhado column groups ou columns não é permitida.
    Observe que, ao usar a fixação com cabeçalhos de várias colunas, todo o grupo é fixado.
    Mover-se entre columns e column groups é permitido apenas quando eles estão no mesmo nível na hierarquia e ambos estão no mesmo group.
    Quando columns/column-groups não são encapsulados por corrente group, o que significa que são de 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 modelado separadamente. O grupo de ng-template colunas espera uma marca decorada com a igxHeader diretiva. O ng-template é fornecido com o objeto de grupo de colunas como um 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, poderá definir a headerTemplate propriedade do grupo de colunas da seguinte forma:

    <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 classificação, precisamos importar o index arquivo, onde todas as funções do tema e mixins de componentes residem:

    @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 os grid-theme parâmetros e aceita os $header-background parâmetros, $header-text-color, $header-border-width,and $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 obter maior flexibilidade em termos de cores usando as palette funções e color. Consulte o Palettes tópico para obter 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 Change Theme pelo tema global selecionado.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.