Visão geral dos cabeçalhos de várias colunas da grade hierárquica Angular

    IgxHierarchicalGrid 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 Hierarchical 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-hierarchical-grid [data]="localdata" [moving]="true" [allowFiltering]="true">
    <igx-column field="CustomerID" sortable="true" resizable="true"></igx-column>
    <igx-column-group header="Address Information">
        <igx-column-group header="Location">
            <igx-column field="Address" sortable="true" resizable="true"></igx-column>
            <igx-column field="City" sortable="true" resizable="true"></igx-column>
            <igx-column field="PostalCode" sortable="true" resizable="true"></igx-column>
            <igx-column field="Country" sortable="true" resizable="true"></igx-column>
        </igx-column-group>
        <igx-column-group header="Contact Information">
            <igx-column field="Phone" sortable="true" resizable="true"></igx-column>
            <igx-column field="Fax" sortable="true" resizable="true"></igx-column>
        </igx-column-group>
    </igx-column-group>
</igx-hierarchical-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-hierarchical-grid [data]="localdata" [allowFiltering]="true" [moving]="true">
    <igx-column field="CustomerID" sortable="true" resizable="true"></igx-column>
    <igx-column-group pinned]="false" header="General Information">
        <igx-column field="CompanyName" sortable="true" resizable="true"></igx-column>
        <igx-column-group header="Person Details">
            <igx-column field="ContactName" sortable="true" resizable="true"></igx-column>
            <igx-column field="ContactTitle" sortable="true" resizable="true"></igx-column>
        </igx-column-group>
    </igx-column-group>
</igx-hierarchical-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-hierarchical-grid [data]="localdata" [allowFiltering]="true" [moving]="true">
    <igx-column field="CustomerID" sortable="true" resizable="true"></igx-column>
    <igx-column-group [pinned]="false" header="General Information">
        <igx-column field="CompanyName" sortable="true" resizable="true"></igx-column>
        <igx-column-group header="Person Details">
            <igx-column field="ContactName" sortable="true" resizable="true"></igx-column>
            <igx-column field="ContactTitle" sortable="true" resizable="true"></igx-column>
        </igx-column-group>
    </igx-column-group>
    ...
</igx-hierarchical-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.