Características de React Pivot Grid

    Los componentes de pivote y rejilla plana heredan de una base común y, por lo tanto, comparten algunas funciones y características.

    Some features do not have meaningful behavior in the context of a pivot table and therefore cannot be enabled for IgrPivotGrid. These include: CRUD operations Grouping Row/Column Pinning resúmenes Paginación

    El componente Pivot Grid tiene características y funcionalidades adicionales relacionadas con sus dimensiones, como se describe a continuación.

    EXAMPLE
    DATA
    TSX
    CSS

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    Clasificación de dimensiones

    Los valores de dimensión en las rows o columns se pueden ordenar mediante el chip relacionado o la API. Esta funcionalidad está integrada y habilitada de forma predeterminada.

    La dimensión se ordena al hacer clic en el chip relacionado y, como resultado, los valores de las dimensiones se ordenan en orden ascendente/descendente.

    La clasificación también se puede aplicar inicialmente mediante la propiedad sortDirection de la definición de dimensión.

    const dimension: IgrPivotDimension = new IgrPivotDimension();
    dimension.memberName = "SellerName";
    dimension.enabled = true;
    dimension.sortDirection = SortingDirection.Asc;
    tsx

    Cambio de tamaño de dimensiones

    Las dimensiones de las filas se pueden cambiar de tamaño de manera similar al cambio de tamaño de las columnas, a través de un indicador de cambio de tamaño que se encuentra en el borde derecho de las celdas. También se pueden ajustar automáticamente haciendo doble clic en el indicador de cambio de tamaño o utilizando la API relacionada -autoSizeRowDimension.

    También se puede establecer un tamaño diferente inicialmente con la width propiedad disponible en la definición de la dimensión:

    const dimension: IgrPivotDimension = new IgrPivotDimension();
    dimension.memberName = "SellerName";
    dimension.enabled = true;
    dimension.width = "400px";
    tsx
    Ignite UI for React | CTA Banner

    Selección de dimensiones

    La cuadrícula dinámica admite la selección única que se habilita igual que en la cuadrícula base. Por ejemplo:

    <IgrPivotGrid data={pivotData} pivotConfiguration={pivotConfiguration} rowSelection={GridSelectionMode.Single}>
    </IgrPivotGrid>
    tsx

    En caso de que haya varias dimensiones de filas o columnas que crearían grupos que abarquen varias filas/columnas, la selección se aplica a todas las celdas que pertenecen al grupo seleccionado.

    Modo súper compacto

    El IgrPivotGrid componente proporciona una superCompactMode entrada. Es adecuado para casos que requieren que haya muchas celdas presentes en la pantalla a la vez. Si está habilitada, la opción ignora la--ig-size variable CSS para la cuadrícula dinámica. Al habilitarla, superCompactMode también se establece el--ig-size destino para small cada componente secundario (como IgrChip) que no tenga la SuperCompactMode opción.

    <IgrPivotGrid data={pivotData} pivotConfiguration={pivotConfiguration} superCompactMode={true}>
    </IgrPivotGrid>
    tsx

    Columna de resumen adicional

    Cuando una dimensión column define una jerarquía, la cuadrícula dinámica mostrará una columna de resumen/total adicional, que acumula las agregaciones de todas las columnas dentro del grupo. Cuando el grupo esté colapsado, solo permanecerá la columna de resumen. Y cuando se expande el grupo, aparece la columna de resumen adicional al final del grupo.

    Interacciones

    Navegación por teclado

    La navegación por teclado funciona IgrPivotGrid de manera similar a la de en IgrGrid. La cuadrícula pivotante se divide en tres áreas -rows, columns, values. Las áreas para rows y columns se consideran encabezados a efectos de navegación, mientras que el área para values es el cuerpo. Las flechas del teclado solo permiten navegar por el elemento activo dentro del área actual.

    Dimensiones Arrastrar y soltar

    Las dimensiones están representadas por fichas que se pueden arrastrar y soltar. Todas las fichas pueden cambiar su orden dentro de su área arrastrando y soltando. Los chips de rows, column, filter (chips de dimensiones) se pueden mover de cualquiera de esas áreas a cualquier otra y en cualquier lugar. Las fichas de estas áreas no se pueden mover al área values y las fichas del área values no se pueden mover a ninguna de las áreas de dimensiones.

    Los chips de Pivot Grid no se pueden mover al Pivot Data Selector y los elementos del Pivot Data Selector no se pueden mover a Pivot Grid.

    Referencias de API

    Recursos adicionales