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

EstableceisGroupByAreaVisible la propiedad en la Redde de Datos a Verdadera, como se muestra en el ejemplo anterior, en la interfaz de usuario. El área de agrupar por grupo permite a los usuarios más opciones para agrupar y ordenar columnas sin interactuar indirectamente con la Redde de Datos. Los grupos pueden posicionarse y reordenarse según las necesidades del usuario. Esta área también se llena cuando se añaden columnas programáticamente, comogroupDescriptions en el DataGrid.

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