The Pivot Grid is designed for reshaping data via dimensions (rows, columns, filters, and values). Unlike standard grids, standard features like cell editing, paging, and column pinning are disabled. All operations are driven by the pivotConfiguration.
Key Concepts:
- Dimensions: Defined in
rows, columns, or filters. Use memberFunction to flatten nested data objects. - Values: Defined in
values. Use aggregate to specify operations like IgxPivotNumericAggregate.sum, .average, .min, .max, or .count. - Auto-generation: Columns are automatically generated from the configuration; do not define
<igx-column> manually. - Data Selector: Use
<igx-pivot-data-selector> to provide a drag-and-drop UI for users to reshape the grid.
import { IPivotConfiguration, IgxPivotNumericAggregate } from 'igniteui-angular/grids/core';
import { IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid';
// ... inside component
public pivotConfigHierarchy: IPivotConfiguration = {
columns: [
{
memberName: 'Product',
memberFunction: (data) => data.Product.Name,
enabled: true
}
],
rows: [
{
memberName: 'Seller',
memberFunction: (data) => data.Seller.Name,
enabled: true
}
],
values: [
{
member: 'NumberOfUnits',
aggregate: {
aggregator: IgxPivotNumericAggregate.sum,
key: 'sum',
label: 'Sum'
},
enabled: true
}
],
filters: null
};
