Blazor Pivot Grid Features

The pivot and flat grid components 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 IgbPivotGrid. 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 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.

    var pivotConfiguration = new IgbPivotConfiguration();
    var rowDimension = new IgbPivotDimension() {
        MemberName = "SellerName",
        Enabled = true,
        SortDirection = SortingDirection.Asc
    };
    pivotConfiguration.Rows.Add(rowDimension);

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:

    var pivotConfiguration = new IgbPivotConfiguration();
    var rowDimension = new IgbPivotDimension() {
        MemberName = "SellerName",
        Enabled = true,
        Width = "400px"
    };
    pivotConfiguration.Rows.Add(rowDimension);

Dimensions Selection

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

<IgbPivotGrid PivotConfiguration="PivotConfiguration"
        Data="PivotSalesData"
        Name="grid"
        RowSelection=GridSelectionMode.Single
        @ref="grid">
</IgbPivotGrid>

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 IgbPivotGrid 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 CSS variable for the Pivot Grid. Enabling SuperCompactMode also sets the --ig-size to small for each child component(like IgbChip) that does not have the SuperCompactMode option.

<IgbPivotGrid SuperCompactMode=true></IgbPivotGrid>

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.

Interactions

Keyboard navigation in IgbPivotGrid works similarly to the one in IgbGrid. 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.