Agrupamento de linhas React

O Ignite UI for React Data Table / Data Grid permite que você agrupe linhas em um Row Group de 'cabeçalho fixo'. Isso é semelhante ao recurso Group By no Microsoft Outlook, que é uma maneira fácil de agrupar dados visualmente com base em seus próprios critérios.

React 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 propriedade groupHeaderDisplayMode permite que os grupos sejam hierárquicos. Por padrão, cada descrição de grupo que é adicionada é agregada. Definir groupHeaderDisplayMode como Split criará um cabeçalho de seção para cada grupo definido na propriedade groupDescriptions do IgrGrid.

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

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

Collapsable Groups

Além disso, o IgrGrid 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 propriedade isGroupCollapsable.

public componentDidMount() {
    // ...
    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 { IgrColumnGroupDescription } from 'igniteui-react-data-grids';
import { ListSortDirection } from 'igniteui-react-core';
import { GroupHeaderDisplayMode } from 'igniteui-react-core';

public componentDidMount() {
    window.addEventListener('load', this.onLoad);
}

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

    this.grid.groupDescriptions.add(state);
    this.grid.groupDescriptions.add(city);
    this.grid.groupDescriptions.add(income);

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