React agrupación de filas
La Ignite UI for React 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.
React 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. Establecer groupHeaderDisplayMode
en Split
creará un encabezado de sección para cada grupo definido en la propiedad groupDescriptions
de IgrGrid
.
import { GroupHeaderDisplayMode } from 'igniteui-react-core';
public componentDidMount() {
// ...
this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split;
}
Collapsable Groups
Además, IgrGrid
puede mostrar un interruptor en cada sección del grupo para permitir al usuario final expandir o contraer los datos agrupados a través de la propiedad isGroupCollapsable
.
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-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;
}
API References
IgrGrid
groupDescriptions
groupHeaderDisplayMode
IsGroupByAreaVisible
isGroupCollapsable