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

    Some features do not have meaningful behavior in the context of a pivot table and therefore cannot be enabled for IgxPivotGrid. These include:

    • 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í.

    Dimensions can also be filtered initially via the dimension configuration in pivotConfiguration with the dimension's filter property. It can be set to a new FilteringExpressionsTree with the related filter condition, for example:

    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

    Row dimensions can be resized similarly to column resizing - via a resizing indicator that can be found on the right edge of the cells. They can also be auto-sized by double clicking the resize indicator, or by using the related API - autoSizeRowDimension.

    A different size can also be set initially with the width property available in the dimension definition:

    public pivotConfigHierarchy: IPivotConfiguration = {
    rows: [
        {
            memberName: 'Country',
            enabled: true,
            width: '400px'
        }
    ]
}
    Note

    As of version 18.0.0 the IgniteUI for Angular the width of the row dimensions can also be set to auto.

    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

    The IgxPivotGrid component provides a superCompactMode @Input. It is suitable for cases that require a lot of cells to be present on the screen at once. If enabled the option ignores the ig-size variable for the pivot grid. Enabling superCompactMode also sets the ig-size variable to ig-size-small for each child component(like IgxChip) that does not have the superCompactMode option.

    <igx-pivot-grid [superCompactMode]="true"></igx-pivot-grid>

    Additional summary column

    When a column dimension defines a hierarchy, the pivot grid will render additional summary/total column, which accumulates the aggregations of all of the columns inside the group. When the group is collapsed only the summary column will remain. And when the group is expanded the additional summary column appears at the end of the group.

    Row Dimensions Headers

    As of version 18.0.0 the IgniteUI for Angular row dimension value headers can be enabled through pivotUI option:

    <igx-pivot-grid [pivotUI]="{ showRowHeaders: true }">
</igx-pivot-grid>

    Row Dimension Layout

    The IgxPivotGridComponent supports two ways of row dimension rendering. This can be controlled by setting the pivotUI option's rowLayout property.

      <igx-pivot-grid [pivotUI]="pivotUI">
  </igx-pivot-grid>

    public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal };

    The default layout of the grid is Vertical. In this mode the hierarchy of dimensions expands vertically. The alternative would be Horizontal. In this mode, the children of a single row dimension when expanded are shown horizontally in the same parent multi row layout. In the sample bellow you can toggle between the two modes to compare them.

    Note that in the Horizontal mode, the parent row dimension aggregates are not visible unless the parent row is collapsed. To show the parent dimension in a row summary, the horizontalSummary property can be enabled for the related dimension.

    rows: [
    {
        memberFunction: () => 'All Products',
        memberName: 'AllProducts',
        enabled: true,
        horizontalSummary: true,
        width: "150px",
        childLevel: {
            //...
        }
    }
]

    Additionally the position of the summary can be changed via the horizontalSummariesPosition property of the pivotUI option. It can be set to either Top(default) or Bottom.

    public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, horizontalSummariesPosition: PivotSummaryPosition.Bottom };
    Note

    The row summary related options - horizontalSummary and horizontalSummariesPosition are applicable only for the Horizontal layout mode.

    Interacciones

    Navegación por teclado

    Keyboard navigation in IgxPivotGrid works similarly to the one in IgxGrid. The pivot grid is split into three areas - rows, columns, values. The areas for rows and columns are considered headers for the purposes of navigation while the area for values is the body. The keyboard arrows allow navigating the active element within the current area only.

    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

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