[!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.

Agrupación de filas Web Components

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

Web Components Row Group-By Area Example

Group-By Area

Establezca la propiedad IsGroupByAreaVisible en DataGrid en True, como se muestra en el ejemplo anterior, en la interfaz de usuario. El área de grupo por permite a los usuarios más opciones para agrupar y ordenar columnas sin interactuar cuando interactúan indirectamente con el DataGrid. Los grupos se pueden posicionar y reordenar según las necesidades de los usuarios. Esta área también se completa cuando las columnas se agregan mediante programación como groupDescriptions en el DataGrid.

Using Group Descriptions Example

Hierarchical Groups

La propiedad groupHeaderDisplayMode permite que los grupos sean jerárquicos. De forma predeterminada, cada descripción de grupo que se agrega se agrega. Configurar groupHeaderDisplayMode en Split creará un encabezado de sección para cada grupo definido en la propiedad groupDescriptions de IgcGridComponent.

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

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

Collapsable Groups

Además, IgcGridComponent puede mostrar un interruptor en cada sección de grupo para permitir al usuario final expandir o contraer los datos agrupados a través de la propiedad isGroupCollapsable.

public connectedCallback() {
    // ...
    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 { 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;
}