Tree Grid Aggregations
If you have non-hierarchical data and you want to group by one or more columns and populate the parent rows with aggregated values, you could use the IgxTreeGridComponent and a custom implementation like in the demo below.
Demo
Note
The sample contains custom logic which is not built in the IgxTreeGridComponent. It is similar to the grouping and summaries features of the IgxGridComponent, but instead inside separate summary rows, the calculated data is displayed inside the parent rows.
Implementation
In this sample we have created a pipe class called TreeGridGroupingPipe which groups the tabular data by the "Category", "Type" and "Contract" fields. The resulting hierarchy is displayed in the newly created "Categories" column. The pipe also calculates aggregated values for the generated parent rows for the "Price", "Change" and "Change(%)" columns. For more information on how this pipe works you can take a look at the TreeGridGroupingPipe class in the tree-grid-grouping.pipe.ts file. The pipe is completely configurable so you could copy and re-use it in your own project.
Here is an example of how to use the pipe in the template:
<igx-tree-grid #grid1
[data]="data | treeGridGrouping:groupColumns:aggregations:groupColumnKey:primaryKey:childDataKey"
[primaryKey]="primaryKey" [childDataKey]="childDataKey">
<igx-column [field]="groupColumnKey" [width]="'180px'" [sortable]='true' [resizable]='true' [disableHiding]="true"></igx-column>
The pipe arguments are the following:
- groupColumns - an array of string values which contains the fields used to generate the hierarchy
- aggregations - an array of
ITreeGridAggregationobjects which contains information about the aggregation functions - groupColumnKey - a string value for the name of the generated hierarchy column
- primaryKey - a string value for the primary key field
- childDataKey - a string value for the field where the child collection of the generated parent rows is stored
public groupColumns = ["Category", "Type", "Contract"];
public aggregations: ITreeGridAggregation[] = [
{
aggregate: (parent: any, data: any[]) => {
return data.map((r) => r.Change).reduce((ty, u) => ty + u, 0);
},
field: "Change"
},
{
aggregate: (parent: any, data: any[]) => {
return data.map((r) => r.Price).reduce((ty, u) => ty + u, 0);
},
field: "Price"
},
{
aggregate: (parent: any, data: any[]) => {
return parent.Change / (parent.Price - parent.Change) * 100;
},
field: "Change(%)"
}
];
public primaryKey = "ID";
public childDataKey = "Children";
public groupColumnKey = "Categories";
