Angular Pivot Grid Features

    The pivot and flat grid component classes inherit from a common base and thus share some functionality and features.

    Note

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

    • CRUD operations
    • Grouping
    • Row/Column Pinning
    • Summaries
    • Paging

    The Pivot Grid component has additional features and functionalities related to its dimensions as described below.

    Dimensions filtering

    All dimensions (filters, rows, columns) can be filtered via the chip UI or the API. This functionality is embedded and enabled by default.

    Note

    You can use the filtering dimension to filter out data values which are not a part of the pivot view.

    The filtering UI can be opened via the dimension chips filter icon and allows excel-style filtering of the unique dimension values.

    Note

    If there is not enough space for all of the filtering chips, the pivot grid will show the ones that were cut off into a dropdown. End-users can access and manipulate them there.

    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

    Dimension values in the rows or columns can be sorted via the related chip or the API. This functionality is embedded and enabled by default.

    The dimension is sorted on click of the related chip and as a result the dimension values are sorted in ascending/descending order.

    Sorting can also be applied initially via the sortDirection property of the dimension definition.

    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

    The Pivot Grid supports single selection which is enabled just like in the base grid. For example:

    <igx-pivot-grid #grid1 [rowSelection]="'single'" [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
</igx-pivot-grid>

    In case there are multiple row or column dimensions which would create groups that span multiple rows/columns, selection is applied to all cells that belong to the selected group.

    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.

    Interactions

    Keyboard navigation

    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

    The dimensions are represented by chips, which can be dragged & dropped. All chips can change their order within their area by drag & drop. The chips from rows, column, filter(dimension chips) can be moved from any of those areas to any other and at any place. Chips from these areas can not be moved to the values area and chips from the values area can not be moved to any of the dimension areas.

    Note

    The chips from the Pivot Grid can not be moved to the Pivot Data Selector and items from the Pivot Data Selector can not be moved to the Pivot Grid.

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.