Características de la cuadrícula de pivote Angular
Las clases de componentes de cuadrícula plana y pivote heredan de una base común y, por lo tanto, comparten algunas funcionalidades y características.
Note
Algunas funciones no tienen un comportamiento significativo en el contexto de una tabla dinámica y, por lo tanto, no se pueden habilitar para IgxPivotGrid. Éstas incluyen:
- operaciones CRUD
- Agrupamiento
- Fijación de fila/columna
- resúmenes
- Paginación
El componente Pivot Grid tiene características y funcionalidades adicionales relacionadas con sus dimensiones, como se describe a continuación.
Dimensions filtering
Todas las dimensiones (filtros, filas, columnas) se pueden filtrar a través de la interfaz de usuario del chip o la API. Esta funcionalidad está integrada y habilitada de forma predeterminada.
Note
Puede utilizar la dimensión de filtrado para filtrar valores de datos que no forman parte de la vista dinámica.
La interfaz de usuario de filtrado se puede abrir a través del icono de filtro de chips de dimensión y permite el filtrado al estilo Excel de los valores de dimensión únicos.
Note
Si no hay suficiente espacio para todos los chips de filtrado, la cuadrícula dinámica mostrará los que se cortaron en un menú desplegable. Los usuarios finales pueden acceder a ellos y manipularlos allí.
Las dimensiones también se pueden filtrar inicialmente a través de la configuración de dimensiones en pivotConfiguration con la propiedad filter de la dimensión. Se puede configurar en un nuevo FilteringExpressionsTree con la condición de filtro relacionada, por ejemplo:
public filterExpTree = new FilteringExpressionsTree(FilteringLogic.And);
constructor() {
this.filterExpTree.filteringOperands = [
{
condition: IgxStringFilteringOperand.instance().condition('equals'),
fieldName: 'SellerName',
searchVal: 'Stanley'
}
];
}
public pivotConfigHierarchy: IPivotConfiguration = {
filters: [
{
memberName: 'SellerName',
enabled: true,
filter: this.filterExpTree
}
]
}
Dimensions sorting
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.
public pivotConfigHierarchy: IPivotConfiguration = {
rows: [
{
memberName: 'SellerName',
enabled: true,
sortDirection: SortingDirection.Asc
}
]
}
Dimensions resizing
Las dimensiones de las filas se pueden cambiar de tamaño de manera similar al cambio de tamaño de las columnas, mediante un indicador de cambio de tamaño que se puede encontrar en el borde derecho de las celdas. También se puede cambiar su tamaño automáticamente haciendo doble clic en el indicador de cambio de tamaño o usando la API relacionada: autoSizeRowDimension.
También se puede establecer inicialmente un tamaño diferente con la propiedad width disponible en la definición de dimensión:
public pivotConfigHierarchy: IPivotConfiguration = {
rows: [
{
memberName: 'Country',
enabled: true,
width: '400px'
}
]
}
Dimensions selection
La cuadrícula dinámica admite la selección única que se habilita igual que en la cuadrícula base. Por ejemplo:
<igx-pivot-grid #grid1 [rowSelection]="'single'" [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
</igx-pivot-grid>
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.
Super Compact Mode
El componente IgxPivotGrid proporciona un @Input superCompactMode. Es adecuado para casos que requieren que haya muchas células presentes en la pantalla a la vez. Si está habilitada, la opción ignora la opción displayDensity para la cuadrícula dinámica. Habilitar superCompactMode también establece la entrada displayDensity en compact para cada componente secundario (como IgxChip) que no tiene la opción superCompactMode.
<igx-pivot-grid [superCompactMode]="true"></igx-pivot-grid>
Additional summary column
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 con teclado en IgxPivotGrid funciona de manera similar a la de IgxGrid. La cuadrícula dinámica se divide en tres áreas: rows, columns y 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 permiten navegar por el elemento activo dentro del área actual únicamente.
Dimensions drag & drop
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.
Note
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.
API References
Additional Resources
- Descripción general de la cuadrícula de pivote Angular
- Agregaciones personalizadas de cuadrícula de pivote Angular
GitHub