All docs
V20.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Total Summary

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

DevExtreme HTML5/JavaScript DataGrid UI component Total Summary

Configure each summary item in the summary.totalItems array. The basic item configuration requires specifying a column that provides data and the aggregate function. Note that each 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: {
            totalItems: [{
                column: "OrderNumber",
                summaryType: "count"
            }, {
                column: "Price",
                summaryType: "sum"
            }
            // ...
            ]
        }
    });
});
Angular
HTML
TypeScript
<dx-data-grid ...
    [columns]="['OrderNumber', 'Price']" >
    <dxo-summary>
        <dxi-total-item
            column="OrderNumber"
            summaryType="count">
        </dxi-total-item>
        <dxi-total-item
            column="Price"
            summaryType="sum">
        </dxi-total-item>
    </dxo-summary>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

View Demo

See Also

Alignment and Location

A summary item is under the column providing data and has the same alignment as this column's data cells by default. Use the showInColumn and alignment properties to change the default values.

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            totalItems: [{
                column: "Amount",
                summaryType: "avg",
                showInColumn: "StoreCity",
                alignment: "center"     // or "left" | "right"
            }, 
            // ...
            ]
        }
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-summary>
        <dxi-total-item
            column="Amount"
            summaryType="avg"
            showInColumn="StoreCity"
            alignment="center">     <!-- or "left" | "right" -->
        </dxi-total-item>
    </dxo-summary>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})