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 características no tienen un comportamiento significativo en el contexto de una tabla dinámica y, por tanto, no pueden habilitarse.IgxPivotGrid Entre ellas se encuentran:
- 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 pueden filtrarse inicialmente mediante la configuración dimensional enpivotConfiguration con la propiedad defilter la dimensión. Se puede establecer en una nuevaFilteringExpressionsTree 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 dimensionales en elrows ocolumns pueden ordenarse mediante el chip relacionado o la API. Esta funcionalidad está integrada y habilitada por defecto.
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 ordenación también puede aplicarse inicialmente mediante lasortDirection propiedad de la definición de dimensión.
public pivotConfigHierarchy: IPivotConfiguration = {
rows: [
{
memberName: 'SellerName',
enabled: true,
sortDirection: SortingDirection.Asc
}
]
}
Dimensions resizing
Las dimensiones de fila pueden redimensionarse de forma similar al redimensionamiento de columnas, mediante un indicador de redimensionamiento que se encuentra en el borde derecho de las celdas. También pueden redimensionarse automáticamente haciendo doble clic en el indicador de redimensionamiento, o usando la API relacionada -autoSizeRowDimension.
También se puede establecer inicialmente un tamaño diferente con lawidth propiedad disponible en la definición de dimensión:
public pivotConfigHierarchy: IPivotConfiguration = {
rows: [
{
memberName: 'Country',
enabled: true,
width: '400px'
}
]
}
Note
A partir de la versión18.0.0, la IgniteUI para Angular laswidth dimensiones de la fila también puede configurarse paraauto.
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
ElIgxPivotGrid componente proporciona unsuperCompactMode @Input. Es adecuado para casos que requieren que haya muchas células presentes en la pantalla a la vez. Si está activada, la opción ignora laig-size variable para la cuadrícula pivotante. HabilitarsuperCompactMode también establece laig-size variable enig-size-small para cada componente hijo (similarIgxChip) que no tiene lasuperCompactMode opción.
<igx-pivot-grid [superCompactMode]="true"></igx-pivot-grid>
Additional summary column
Cuando unacolumn dimensión define una jerarquía, la cuadrícula pivote renderizará columna adicional, que acumula las agregaciones de todas las columnas dentro del grupo. Cuando el grupo se desintegra, solo queda la columna de resumen. Y cuando el grupo se amplía, aparece la columna de resumen adicional al final del grupo.
Row Dimensions Headers
A partir de la versión18.0.0, la IgniteUI para cabeceras de valores de Angular dimensión de fila puede activarse mediantepivotUI la opción:
<igx-pivot-grid [pivotUI]="{ showRowHeaders: true }">
</igx-pivot-grid>
Row Dimension Layout
SoportaIgxPivotGridComponent dos formas de renderizado en dimensiones de fila. Esto se puede controlar estableciendo lapivotUI propiedad derowLayout la opción.
<igx-pivot-grid [pivotUI]="pivotUI">
</igx-pivot-grid>
public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal };
La disposición predeterminada de la cuadrícula sí loVertical es. En este modo, la jerarquía de dimensiones se expande verticalmente. La alternativa seríaHorizontal. En este modo, los hijos de una sola dimensión de fila al expandirse se muestran horizontalmente en la misma disposición de múltiples filas padre. En el mostrador que sigue puedes alternar entre los dos modos para compararlos.
Ten en cuenta que en esteHorizontal modo, los agregados de la dimensión de fila padre no son visibles a menos que la fila padre esté colapsada. Para mostrar la dimensión padre en un resumen de fila, se puede activar lahorizontalSummary propiedad 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 puede cambiarse mediante lahorizontalSummariesPosition propiedad de lapivotUI opción. Se puede configurar comoTop (por defecto) o.Bottom
public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, horizontalSummariesPosition: PivotSummaryPosition.Bottom };
Note
Las opciones de resumen de filas relacionadas -horizontalSummaryyhorizontalSummariesPosition solo son aplicables para elHorizontal modo de diseño.
Interacciones
Navegación por teclado
La navegación con teclado funcionaIgxPivotGrid de forma similar a la que se in.IgxGrid La cuadrícula pivotante está dividida en tres áreas -rows,columns,values. Las áreas pararows ycolumns se consideran encabezados para fines de navegación, mientras que el área paravalues es el cuerpo. Las flechas del teclado permiten navegar solo por el elemento activo dentro del área actual.
Dimensions drag & drop
Las dimensiones se representan mediante chips, que pueden arrastrarse y soltar. Todas las fichas pueden cambiar su orden dentro de su área mediante arrastrar y soltar. Los chips derows,column,filter (chips dimensionales) pueden moverse de cualquiera de esas áreas a cualquier otra y en cualquier lugar. Los chips de estas áreas no pueden moverse a lavalues zona y los chips de lavalues zona no pueden moverse a ninguna de las áreas dimensionales.
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 dinámica de Angular
- Agregaciones personalizadas de cuadrícula de pivote Angular
GitHub