Agrupación de filas React

La tabla de datos Ignite UI for React / cuadrícula de datos le permite agrupar filas en un grupo de filas de 'encabezado fijo'. Esto es similar a la función Agrupar por de Microsoft Outlook, que es una manera fácil de agrupar datos visualmente en función de sus propios criterios.

React Row Group-By Area Example

Group-By Area

Set isGroupByAreaVisible property on the DataGrid to True, as shown in the example above, to the user interface. The group-by area allows users more options to group and sort columns without interact when interacting the DataGrid indirectly. Groups can be positioned and reordered based on the users needs. This area also populates when columns are programmatically added as groupDescriptions on the DataGrid as well.

Using Group Descriptions Example

Hierarchical Groups

LagroupHeaderDisplayMode propiedad permite que los grupos sean jerárquicos. Por defecto, cada descripción de grupo que se añade se agrega. Al establecer elgroupHeaderDisplayMode aSplit creará un encabezado de sección para cada grupo definido engroupDescriptions propiedad de elIgrDataGrid.

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

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

Collapsible Groups

Además,IgrDataGrid pueden mostrar un interruptor en cada sección de grupo para permitir al usuario final expandir o colapsar los datos agrupados a través de laisGroupCollapsable propiedad.

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

Summary

Para su comodidad, todos los fragmentos de código anteriores se combinan en un bloque de código a continuación que puede copiar fácilmente a su proyecto.

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