[!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 Row Grouping

The Ignite UI for Web Components Data Table / Data Grid lets you group rows into a ‘sticky header’ Row Group. This is similar to the Group By feature in Microsoft Outlook, which is an easy way to visually group data based on your own criteria.

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

The groupHeaderDisplayMode property allows the groups to be hierarchical. By default, each group description that is added gets aggregated together. Setting the groupHeaderDisplayMode to Split will create a section header for ever group defined in groupDescriptions property of the IgcGridComponent.

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

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

Collapsable Groups

Also, the IgcGridComponent can display a toggle on each group section to allow the end user to expand or collapse the grouped data via the isGroupCollapsable property.

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-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;
}