[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Web Components agrupamento de linhas

A Tabela de Dados/Grade de Dados Ignite UI for Web Components permite agrupar linhas em um grupo de linhas de 'cabeçalho fixo'. Isso é semelhante ao recurso Agrupar por no Microsoft Outlook, que é uma maneira fácil de agrupar dados visualmente com base em seus próprios critérios.

Web Components Row Group-By Area Example

Group-By Area

Defina a propriedade IsGroupByAreaVisible no DataGrid como True, conforme mostrado no exemplo acima, para a interface do usuário. A área group-by permite aos usuários mais opções para agrupar e classificar colunas sem interagir ao interagir com o DataGrid indiretamente. Os grupos podem ser posicionados e reordenados com base nas necessidades dos usuários. Esta área também é preenchida quando colunas são adicionadas programaticamente como groupDescriptions no DataGrid.

Using Group Descriptions Example

Hierarchical Groups

A groupHeaderDisplayMode propriedade permite que os grupos sejam hierárquicos. Por padrão, cada descrição de grupo adicionada é agregada. Definir o groupHeaderDisplayMode para Split criará um cabeçalho de seção para cada grupo definido na groupDescriptions propriedade do IgcGridComponent.

import { GroupHeaderDisplayMode } from 'igniteui-webcomponents-core';

public connectedCallback() {
    // ...
    this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split;
}

Collapsable Groups

Além disso, o IgcGridComponent pode exibir uma alternância em cada seção do grupo para permitir que o usuário final expanda ou recolha os dados agrupados por meio da isGroupCollapsable propriedade.

public connectedCallback() {
    // ...
    this.grid.isGroupCollapsable = true;
}

Summary

Para sua conveniência, todos os trechos de código acima são combinados em um bloco de código abaixo que você pode copiar facilmente para seu projeto.

import { IgcIgcColumnGroupDescription } from 'igniteui-webcomponents-data-grids';
import { ListSortDirection } from 'igniteui-webcomponents-core';
import { GroupHeaderDisplayMode } from 'igniteui-webcomponents-core';

public connectedCallback() {
    const state = new IgcColumnGroupDescription();
    state.field = "Country";
    state.displayName = "Location";
    state.sortDirection = ListSortDirection.Descending;
    const city = new IgcColumnGroupDescription();
    city.field = "City";
    city.displayName = "";
    const income = new IgcColumnGroupDescription();
    income.field = "Income";
    income.displayName = "Income";

    this.grid = document.getElementById("grid") as IgcDataGridComponent;
    this.grid.groupDescriptions.add(state);
    this.grid.groupDescriptions.add(city);
    this.grid.groupDescriptions.add(income);

    this.grid.isGroupCollapsable = true;
    this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split;
}