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.