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'
}
]
}
Note
A partir de la versión 18.0.0, también se puede establecer auto la interfaz de usuario de IgniteUI para Angular las width dimensiones de la fila.
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 IgxPivotGrid componente proporciona un superCompactMode @Input. 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 ig-size variable de la cuadrícula dinámica. Al habilitar superCompactMode, también se establece la ig-size variable en ig-size-small para cada componente secundario (como IgxChip) que no tiene la superCompactMode opción.
<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.
Row Dimensions Headers
A partir de la versión 18.0.0, IgniteUI para Angular encabezados de valor de dimensión de fila se puede habilitar a través de la pivotUI opción:
<igx-pivot-grid [pivotUI]="{ showRowHeaders: true }">
</igx-pivot-grid>
Row Dimension Layout
Admite IgxPivotGridComponent dos formas de representación de la dimensión de fila. Esto se puede controlar estableciendo la propiedad de rowLayout la pivotUI opción.
<igx-pivot-grid [pivotUI]="pivotUI">
</igx-pivot-grid>
public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal };
El diseño predeterminado de la cuadrícula es Vertical. En este modo, la jerarquía de dimensiones se expande verticalmente. La alternativa sería Horizontal. En este modo, los elementos secundarios de una sola dimensión de fila, cuando se expanden, se muestran horizontalmente en el mismo diseño de varias filas principal. En el ejemplo a continuación, puede alternar entre los dos modos para compararlos.
Tenga en cuenta que en el Horizontal modo, los agregados de dimensión de fila principal no son visibles a menos que la fila principal esté contraída. Para mostrar la dimensión principal en un resumen de fila, la horizontalSummary propiedad se puede habilitar para la dimensión relacionada.
rows: [
{
memberFunction: () => 'All Products',
memberName: 'AllProducts',
enabled: true,
horizontalSummary: true,
width: "150px",
childLevel: {
//...
}
}
]
Además, la posición del resumen se puede cambiar a través de la horizontalSummariesPosition propiedad de la pivotUI opción. Se puede establecer en cualquiera de los dos Top valores (predeterminado) o Bottom.
public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, horizontalSummariesPosition: PivotSummaryPosition.Bottom };
Note
Las opciones relacionadas con el resumen de filas -horizontalSummary y horizontalSummariesPosition solo son aplicables para el modo de Horizontal diseño.
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