React Agrupar cuadrícula por

El Ignite UI for React Agrupar por comportamiento en React IgrGrid crea filas de datos agrupadas basadas en los valores de las columnas. El Grupo By en permiteIgrGrid visualizar los grupos en una estructura jerárquica. Las filas de datos agrupadas pueden expandirse o colapsarse y el orden de agrupación puede cambiarse a través de la interfaz o API. Cuando la selección de filas está activada, se renderiza un selector de Agrupar por fila en el área más a la izquierda de la fila de grupo. En caso de que larowSelection propiedad esté configurada como simple, las casillas de verificación están desactivadas y solo sirven como indicación para el grupo donde se coloca la selección. Si larowSelection propiedad está configurada como múltiple, al hacer clic en el selector Agrupar por filas se seleccionan todos los registros que pertenecen a este grupo.

React Grid Group By Example

Este ejemplo presenta las capacidades de agrupación de una gran cantidad de datos. Arrastrar los encabezados de las columnas a la parte superior (área de agrupación) permite a los usuarios ver los datos de la columna seleccionada en una estructura jerárquica. Pueden agrupar en varios campos arrastrando más encabezados de columna a la parte superior. Estas opciones de agrupación resultan útiles cuando tienes tablas con numerosas filas y columnas donde los usuarios quieren presentar los datos de una manera mucho más rápida y visualmente aceptable.

Initial Grouping State

Es posible definir el agrupamiento inicial de la cuadrícula asignando un array de expresiones a lagroupingExpressions propiedad de la cuadrija.

const expressions = [
    { fieldName: 'ProductName', dir: SortingDirection.Desc },
    { fieldName: 'Released', dir: SortingDirection.Desc }
];
const grid1Ref = useRef<IgrGrid>(null);

<IgrGrid
    autoGenerate={true}
    groupingExpressions={expressions}
    ref={grid1Ref}>
</IgrGrid>

Agrupar expresiones implementa laISortingExpression interfaz.

Group By API

Grouping API

El agrupamiento está disponible a través de la interfaz y mediante una API robusta expuesta por el componente de cuadra. Los desarrolladores pueden permitir que los usuarios finales agrupen los datos de la cuadrícula por ciertas columnas, estableciendo la propiedad deGroupable cada columna entrue.

<IgrGrid
    autoGenerate={false}
    ref={gridRef}>
    <IgrColumn field="OrderID" hidden={true}></IgrColumn>
    <IgrColumn field="ShipCountry" header="Ship Country" width="200px" groupable={true}></IgrColumn>
    <IgrColumn field="OrderDate" header="Order Date" dataType="date" width="200px" groupable={true}></IgrColumn>
    <IgrColumn field="PostalCode" header="Postal Code" width="200px" groupable={true}></IgrColumn>
    <IgrColumn field="Discontinued" width="200px" dataType="boolean" groupable={true}></IgrColumn>
</IgrGrid>

Durante el tiempo de ejecución, las expresiones son obtenibles y establecibles desde lagroupingExpressions propiedad. Si necesitas añadir o cambiar una expresión existente, también puedes usar elgroupBy método con una sola expresión, o un array de ellas.

gridRef.current.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true }]);

Expand/Collapse API

Además de agrupar expresiones, también puedes controlar los estados de expansión de las filas de grupo. Se almacenan en una propiedad separada delIgrGrid componentegroupingExpansionState que es una colección deIgrGroupByExpandState. Cada estado de expansión está definido de forma única por el nombre del campo para el que se creó y el valor que representa para cada nivel de agrupación, es decir, el identificador es un array jerárquico deIgrGroupByKey.

Como ocurre congroupingExpressions establecer una lista deIgrGroupByExpandState directamente a lagroupingExpansionState expansión que cambia en consecuencia. AdemásIgrGrid, expone un métodotoggleGroup que cambia de actividad a un grupo mediante la instancia de registro de grupo o mediante laexpanded propiedad de la fila.

const groupRow = gridRef.current.getRowByIndex(0).groupRow;
gridRef.current.toggleGroup(groupRow);

const groupRow = gridRef.current.getRowByIndex(0);
groupRow.expanded = false;

Los grupos pueden crearse, expandidos (por defecto) o colapsados, y los estados de expansión generalmente solo contendrían el estado opuesto al comportamiento por defecto. Puedes controlar si los grupos deben expandirse o no a través de lagroupsExpanded propiedad.

Select/Deselect All Rows in a Group API

Seleccionar/Deseleccionar todas las filas de un grupo está disponible a través de losselectRowsInGroup métodos de la API de YdeselectRowsInGroup.

El fragmento de código que aparece a continuación puede usarse para seleccionar todas las filas dentro de un grupo usando el método de instanciaselectRowsInGroup de registro de grupo. Además, el segundo parámetro de este método es una propiedad booleana mediante la cual puedes elegir si la selección de fila anterior se limpia o no. La selección anterior se conserva por defecto.

const groupRow = gridRef.current.getRowByIndex(0).groupRow;
gridRef.current.selectRowsInGroup(groupRow);

Si necesitas deseleccionar todas las filas de un grupo programáticamente, puedes usar eldeselectRowsInGroup método.

const groupRow = gridRef.current.getRowByIndex(0).groupRow;
gridRef.current.deselectRowsInGroup(groupRow);

Templating

Group Row Templates

La fila de grupo, excepto la interfaz de expansión/colapso, es totalmente templacionable. Por defecto, se muestra un icono de agrupación y muestra el nombre del campo y el valor que representa. El contexto sobre el que se debe renderizar la plantilla es de tipoIgrGroupByRecord.

Como ejemplo, la siguiente plantilla haría que el resumen de filas del grupo fuera más detallado:

const template = (ctx: IgrGroupByRowTemplateContext) => {
    const groupRow = ctx.implicit;
    return (<>
       <span>Total items with value: { groupRow.value } are { groupRow.records.length }</span>
    </>)
}

Group Row Selector Templates

Como se mencionó antes, la fila de grupo, salvo la interfaz de expansión/colapso, es totalmente templacionable. Para crear una plantilla personalizada de selector Agrupar por fila, úsalogroupByRowSelectorTemplate. Desde la plantilla, puedes acceder a la variable de contexto proporcionada implícitamente, con propiedades que te dan información sobre el estado de Group by row.

LaselectedCount propiedad muestra cuántos de los registros del grupo están seleccionados actualmente mientrastotalCount que cuántos registros pertenecen al grupo.

const template = (ctx: IgrGroupByRowSelectorTemplateContext) => {
    return (<>
        { ctx.implicit.selectedCount } / { ctx.implicit.totalCount }
    </>)
}

LagroupRow propiedad devuelve una referencia a la fila del grupo.

const template = (ctx: IgrGroupByRowSelectorTemplateContext) => {
    const groupRow = ctx.implicit.groupRow;
    return (<>
        <div onClick={(e: any) => handleGroupByRowSelectorClick(e, groupRow)}>Handle groupRow</div> `;
    </>)
}

LasselectedCount propiedades ytotalCount pueden usarse para determinar si el selector Agrupar por fila debe estar marcado o indeterminado (parcialmente seleccionado).

React Grid Group By With Paging

Las filas de grupo participan en el proceso de paginación junto con las filas de datos. Cuentan para el tamaño de página de cada página. Las filas contraídas no se incluyen en el proceso de paginación. Cualquier operación de expandir o contraer obliga a Paging a recalcular el recuento de páginas y ajustar el índice de páginas si es necesario. Los grupos que abarcan varias páginas se dividen entre ellos. La fila del grupo es visible solo en la página en la que comienza y no se repite en las páginas siguientes. La información de resumen de las filas del grupo se calcula en función de todo el grupo y no se ve afectada por la paginación.

React Group By With Paging Example

Group By With Summaries

La integración entre Agrupar por y Resúmenes se describe en el tema Resúmenes.

Keyboard Navigation

La interfaz de usuario de agrupación admite las siguientes interacciones de teclado:

• Para filas de grupo (el foco debe estar en la fila o en la celda expandir/contraer)

  • ALT + DERECHA: expande el grupo
  • ALT + IZQUIERDA: colapsa el grupo
  • ESPACIO: selecciona todas las filas del grupo, si la propiedad RowSelection está establecida en múltiples

• Para los componentes del grupoIgrChip en el grupo por área (el enfoque debe estar en el chip)

  • MAYÚS + IZQUIERDA: mueve el chip enfocado hacia la izquierda, cambiando el orden de agrupación, si es posible
  • MAYÚS + DERECHA: mueve el chip enfocado hacia la derecha, cambiando el orden de agrupación, si es posible
  • ESPACIO: cambia la dirección de clasificación
  • ELIMINAR: desagrupa el campo
  • Los elementos separados del chip también se pueden enfocar y se puede interactuar con ellos mediante la ENTER llave.

React Grid Custom Group By

Grid permite definir agrupaciones personalizadas por columna o por expresión de agrupación, lo que proporciona agrupaciones basadas en una condición personalizada. Esto es útil cuando necesita agrupar por objetos complejos o para otros escenarios específicos de aplicaciones.

La muestra siguiente muestra agrupación personalizada porDate, donde los valores de fecha se ordenan y agrupan por Día, Semana, Mes o Año según el modo de agrupación seleccionado por el usuario.

React Custom Group By Example

El ejemplo define un ordenamiento personalizado para las diferentes condiciones de fecha. Cada estrategia personalizada define elGroupingComparer método, que es la función de comparación personalizada utilizada al ordenar los valores. Además, extrae los valores de la fecha necesaria para la comparación.

const groupByMode = "Month";
function getParsedDate(date: any) {
    return {
        day: date.getDay(),
        month: date.getMonth() + 1,
        year: date.getFullYear()
    };
}

Se define unaGroupingComparer función para las expresiones de agrupamiento, que determina los elementos que pertenecen al mismo grupo en función del modo de agrupación seleccionado. Los valores en los datos ordenados para los que esta función devuelve 0 se marcan como parte del mismo grupo.

grid.groupingExpressions = [
    { fieldName: 'OrderDate', dir: SortingDirection.Desc,
    groupingComparer: (a, b) => {
            const dateA = this.getParsedDate(a);
            const dateB = this.getParsedDate(b);
            if (this.groupByMode === 'Month') {
                return dateA.month === dateB.month ? 0 : -1;
            } else if (this.groupByMode === "Year") {
                return dateA.year === dateB.year ? 0 : -1;
            } else if (this.groupByMode === 'Week') {
                return this.getWeekOfDate(a) === this.getWeekOfDate(b) ? 0 : -1;
            }
            return dateA.day === dateB.day && dateA.month === dateB.month ? 0 : -1;
        }
    }
];

Styling

Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

<IgrGrid className="grid">
</IgrGrid>

Luego configure las propiedades CSS relacionadas para esa clase:

.grid {
    --ig-grid-group-row-background: #969799;
    --ig-grid-group-row-selected-background: #969799;
    --ig-grid-group-label-column-name-text: #f8f8f8;
    --ig-grid-group-label-text: #f8f8f8;
    --ig-grid-group-count-text-color: #222;
    --ig-grid-expand-icon-color: #f8f8f8;
    --ig-grid-expand-icon-hover-color: #f8f8f8;
}

Demo

Known Limitations

Limitación	Descripción
La cantidad máxima de columnas agrupadas es 10.	Si se agrupan más de 10 columnas, se genera un error.

API References

• IgrGrid
• IgrGroupByRecord
• ISortingExpression
• column
• IGroupByExpandState
• IgrChip

Additional Resources

• Descripción general de la cuadrícula
• Virtualización y rendimiento
• Paginación
• Filtración
• Clasificación
• Columna en movimiento
• resúmenes
• Cambio de tamaño de columna
• Selección

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for React Forums
• Ignite UI for React GitHub