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

DefinaisGroupByAreaVisible a propriedade no DataGrid como Verdadeira, como mostrado no exemplo acima, na interface do usuário. A área de agrupar por grupo permite aos usuários mais opções para agrupar e ordenar colunas sem interagir ao interagir indiretamente com o DataGrid. Os grupos podem ser posicionados e reordenados de acordo com as necessidades do usuário. Essa área também aparece quando colunas são adicionadas programaticamente, comogroupDescriptions no DataGrid.

Using Group Descriptions Example

Hierarchical Groups

AgroupHeaderDisplayMode propriedade permite que os grupos sejam hierárquicos. Por padrão, cada descrição de grupo adicionada é agregada. Definir ogroupHeaderDisplayMode paraSplit criará um cabeçalho de seção para cada grupo definido nagroupDescriptions propriedade doIgrDataGrid.

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

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

Collapsible Groups

Além disso, podemIgrDataGrid exibir uma opção de alternância em cada seção de grupo para permitir que o usuário final expanda ou colapse os dados agrupados via aisGroupCollapsable propriedade.

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