DevExtreme Angular - Group Summary

A group summary aggregates data in groups by columns. You can associate each column with one or more summary items of different types.

DevExtreme HTML5/JavaScript DataGrid Widget Group Summary

Configure each summary item in the summary.groupItems array. The simplest item configuration requires a column that provides data and the aggregate function to be specified. Note that each group summary item is calculated only for those rows that meet filtering conditions if a filter is applied.

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: ["OrderNumber", "Price"],
        summary: {
            groupItems: [{
                column: "OrderNumber",
                summaryType: "count"
            }, {
                column: "Price",
                summaryType: "sum"
            }, {
                column: "Price",
                summaryType: "max"
            }
            // ...
            ]
        }
    });
});
Angular
HTML
TypeScript
<dx-data-grid ...
    [columns]="['OrderNumber', 'Price']" >
    <dxo-summary>
        <dxi-group-item
            column="OrderNumber"
            summaryType="count">
        </dxi-group-item>
        <dxi-group-item
            column="Price"
            summaryType="sum">
        </dxi-group-item>
        <dxi-group-item
            column="Price"
            summaryType="max">
        </dxi-group-item>
    </dxo-summary>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

View Demo

See Also

Alignment and Location

All group items are displayed in parentheses after the group header by default. You can show an item in the column providing data for it by assigning true to the alignByColumn option. Specify the showInColumn option to show it in another column. This option can also be applied to items shown in the group footer.

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: ["OrderNumber", "City", "Price"],
        summary: {
            groupItems: [{
                column: "City",
                summaryType: "count",
                alignByColumn: true
            }, {
                column: "Price",
                summaryType: "sum",
                showInGroupFooter: true
            }, {
                column: "Price",
                summaryType: "max",
                showInGroupFooter: true,
                showInColumn: "City"
            },
            // ...
            ]
        }
    });
});
Angular
HTML
TypeScript
<dx-data-grid ...
    [columns]="['OrderNumber', 'City', 'Price']" >
    <dxo-summary>
        <dxi-group-item
            column="City"
            summaryType="count"
            [alignByColumn]="true">
        </dxi-group-item>
        <dxi-group-item
            column="Price"
            summaryType="sum"
            [showInGroupFooter]="true">
        </dxi-group-item>
        <dxi-group-item
            column="Price"
            summaryType="sum"
            [showInGroupFooter]="true"
            showInColumn="City">
        </dxi-group-item>
    </dxo-summary>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

View Demo

Sort by Group Summary

Groups are sorted by values of a column they are grouped by. You can also sort them by a group summary item, for example, by the number of records in each group. Specify which summary item to sort by in the sortByGroupSummaryInfo array item's summaryItem field. The summaryItem can be the item name, item type, item index or column name. You can change the default sort order using the sortByGroupSummaryInfo.sortOrder option.

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            groupItems: [{
                column: "OrderNumber",
                summaryType: "count",
                name: "Total Count"
            }
            // ...
            ]
        },
        sortByGroupSummaryInfo: [{
            summaryItem: "Total Count",  // or "count" | 0 | "OrderNumber"
            sortOrder: "desc"            // or "asc"
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-summary>
        <dxi-group-item
            column="OrderNumber"
            summaryType="count"
            name="Total Count">
        </dxi-group-item>
    </dxo-summary>
    <dxi-sort-by-group-summary-info 
        summaryItem="Total Count"  <!-- or "count" | 0 | "OrderNumber" -->
        sortOrder="desc">          <!-- or "asc" -->
    </dxi-sort-by-group-summary-info>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Summary-based sorting is applied when you group data by any column. If you need to apply it only when a specific column groups data, specify its name in the groupColumn field.

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            groupItems: [{
                column: "SaleAmount",
                summaryType: "max"
            }, {
                column: "TotalAmount",
                summaryType: "max"
            }
            // ...
            ]
        },
        sortByGroupSummaryInfo: [{
            summaryItem: "max",  
            groupColumn: "TotalAmount",
            sortOrder: "asc"        
        }, {
            summaryItem: "max",  
            groupColumn: "SaleAmount",
            sortOrder: "desc"
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-summary>
        <dxi-group-item
            column="SaleAmount"
            summaryType="max">
        </dxi-group-item>
        <dxi-group-item
            column="TotalAmount"
            summaryType="max">
        </dxi-group-item>
    </dxo-summary>
    <dxi-sort-by-group-summary-info 
        summaryItem="max"  
        groupColumn="TotalAmount"
        sortOrder="asc">         
    </dxi-sort-by-group-summary-info>
    <dxi-sort-by-group-summary-info 
        summaryItem="max"  
        groupColumn="SaleAmount"
        sortOrder="desc">         
    </dxi-sort-by-group-summary-info>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})