Group and Caption Aggregates in Angular Data Grid

26 Aug 202612 minutes to read

Group footer and caption aggregates display summary values calculated from the records within each group.

To configure this in the grid, use the following properties on the AggregateColumnDirective:

  • Ensure the AggregateService is injected into the component’s providers array to enable aggregate functionality.
  • Set allowGrouping to true in the grid to enable column grouping.
  • Set showGroupedColumn to true in groupSettings to display grouped columns in the grid.

Group footer aggregates appear in the footer row of each group and display summary values calculated from that group’s records. To render values in the group footer, use the groupFooterTemplate property in the AggregateColumnDirective.

The following example displays the sum of the “Freight” field in the footer of each group using the Angular Data Grid:

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { AggregateService, GridModule, GroupService, GroupSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [AggregateService, GroupService],
    standalone: true,
    selector: 'app-root',
    templateUrl: 'app.template.html'
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public groupOptions: GroupSettingsModel = { showDropArea: false, columns: ['ShipCountry'] };

    ngOnInit(): void {
        this.data = data;
    }
}
<ejs-grid [dataSource]='data' height='290px' [allowGrouping]="true" [groupSettings]="groupOptions">
    <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='right' width=120></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
        <e-column field='OrderDate' headerText='Order Date' format='yMd' width=120></e-column>
        <e-column field='Freight' format='C2' width=150></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
    </e-columns>
    <e-aggregates>
        <e-aggregate>
            <e-columns>
                <e-column field="Freight" type="Sum">
                    <ng-template #groupFooterTemplate let-data>Sum: {{data.Sum}}</ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
    </e-aggregates>
</ejs-grid>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Inside the template, access aggregate values using the corresponding aggregate type name. For example, use data.Sum to access the sum aggregate and data.Max to access the maximum aggregate.

Group caption aggregates

Group caption aggregates are displayed in the caption cells at the top of each group, providing a quick summary of the grouped data. To render these aggregates, use the groupCaptionTemplate property to display aggregate values in the group caption cells.

The following example displays the maximum value of the “Freight” field in the each group caption cell using the Angular Data Grid:

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { AggregateService, GridModule, GroupService, GroupSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [AggregateService, GroupService],
    standalone: true,
    selector: 'app-root',
    templateUrl: 'app.template.html'
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public groupOptions: GroupSettingsModel = { showDropArea: false, columns: ['ShipCountry'] };

    ngOnInit(): void {
        this.data = data;
    }
}
<ejs-grid [dataSource]='data' height='290px' [allowGrouping]="true" [groupSettings]="groupOptions">
    <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='right' width=120></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
        <e-column field='OrderDate' headerText='Order Date' format='yMd' width=120></e-column>
        <e-column field='Freight' format='C2' width=150></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
    </e-columns>
    <e-aggregates>
        <e-aggregate>
            <e-columns>
                <e-column field="Freight" type="Max">
                    <ng-template #groupCaptionTemplate let-data>Max: {{data.Max}}</ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
    </e-aggregates>
</ejs-grid>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Disable page-wise aggregates for grouping

By default, when paging and grouping are enabled, group aggregates are calculated using only the records available on the current page. To calculate group aggregates using all records in the grouped dataset, set the groupSettings.disablePageWiseAggregates property to true.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { AggregateService, GridModule, GroupService, GroupSettingsModel, PageService, PageSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [AggregateService, GroupService, PageService],
    standalone: true,
    selector: 'app-root',
    templateUrl: 'app.template.html'
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public groupOptions: GroupSettingsModel = { showDropArea: false, columns: ['ShipCountry'], disablePageWiseAggregates: true, };
    public pageOptions: PageSettingsModel = { pageSize: 5 };
    ngOnInit(): void {
        this.data = data;
    }
}
<ejs-grid [dataSource]='data' height='255px' [allowPaging]="true" [allowGrouping]="true" [groupSettings]="groupOptions" [pageSettings]="pageOptions">
    <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='right' width=120></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
        <e-column field='OrderDate' headerText='Order Date' format='yMd' width=120></e-column>
        <e-column field='Freight' format='C2' width=150></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
    </e-columns>
    <e-aggregates>
        <e-aggregate>
            <e-columns>
                <e-column field="Freight" type="Sum">
                    <ng-template #groupFooterTemplate let-data>Sum: {{data.Sum}}</ng-template>
                </e-column>
                <e-column field="Freight" type="Max">
                    <ng-template #groupCaptionTemplate let-data>Max: {{data.Max}}</ng-template>
                </e-column>
                <e-column field="Freight" type="Sum">
                    <ng-template #footerTemplate let-data>Sum: {{data.Sum}}</ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
    </e-aggregates>
</ejs-grid>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See also