The group summary provides a synopsis of a group of data. Groups of data are formed in the process of grouping. The group summary contains several items. Each item displays a value that is a product of applying an aggregate function to a group of data.

To specify the items of the group summary, declare an array of objects, each of which contains at least two fields: column and summaryType. The column field specifies the identifier of the column that provides data for an aggregate function. The summaryType specifies the aggregate function to be applied. The following code snippet shows how to declare two summary items.

jQuery

JavaScript

$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            groupItems: [{
                column: "Age",
                summaryType: "avg"
            }, {
                column: "LastName",
                summaryType: "count"
            }]
        }
    });
});

Angular

HTML

TypeScript

<dx-data-grid ... >
    <dxo-summary>
        <dxi-group-item
            column="Age"
            summaryType="avg">
        </dxi-group-item>
        <dxi-group-item
            column="LastName"
            summaryType="count">
        </dxi-group-item>
    </dxo-summary>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxSummary>
            <DxGroupItem
                column="Age"
                summary-type="avg"
            />
            <DxGroupItem
                column="LastName"
                summary-type="count"
            />
        </DxSummary>
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxSummary,
    DxGroupItem
} from 'devextreme-vue/data-grid';

export default {
    components: {              
        DxDataGrid,
        DxSummary,
        DxGroupItem
    },
    // ...
}
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Summary,
    GroupItem
} from 'devextreme-react/data-grid';

export default function App() {
    return (
        <DataGrid ... >
            <Summary>
                <GroupItem
                    column="Age"
                    summaryType="avg"
                />
                <GroupItem
                    column="LastName"
                    summaryType="count"
                />
            </Summary>
        </DataGrid>
    );
}

A group summary item may be located either in the group row or the group footer. By default, the group row holds all summary items. To locate a summary item in the group footer, set the showInGroupFooter property of this item to true.

View Demo

alignByColumn

Indicates whether to display group summary items in parentheses after the group row header or to align them by the corresponding columns within the group row.

Type:

Boolean

Default Value: false

When this property is set to false, group summary items are displayed in brackets of the group row header. Set this property to true to align them by the corresponding columns within the group row.

You can also display group summary items in a group footer by setting the showInGroupFooter property to true.

NOTE

If this property is set to true for the first column of the grid, this setting is ignored (the summary item will be displayed in parentheses after the group row header). It happens because in the described case, the group header and the summary value occupy the same cell.

View Demo

column

Specifies the column that provides data for a group summary item.

Type:

String

| undefined

Default Value: undefined

To provide data for a group summary item, assign the name, data field or caption of a column to this property. This item will be displayed in each group row when grouping is applied. If you require to place the group summary item in the group footer, set the showInGroupFooter property to true for this item.

View Demo

customizeText

Customizes the text to be displayed in the summary item.

Type:

Function

Function parameters:

itemInfo:

Object

The summary item's data.

Object structure:

Name	Type	Description
valueText	String	The summary item's formatted value.
value	String \| Number \| Date	The summary item's value as it was calculated.

Name

Type

Description

valueText

String

The summary item's formatted value.

value

String

Number

Date

The summary item's value as it was calculated.

Return Value:

String

The text for the summary item to display.

This property accepts a function that must return the text to be displayed in the summary item. When you implement this function, you can access the summary item value using the fields of object passed to the function as its argument.

displayFormat

Specifies the summary item's text.

Type:

String

| undefined

Default Value: undefined

You can use the following position markers in this text:

{0} - formatted summary value.
{1} - the parent column's caption. Available if the showInColumn property is specified.

jQuery

JavaScript

$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            groupItems: [{
                column: "SaleAmount",
                summaryType: "sum",
                showInColumn: "TotalAmount",
                valueFormat: "currency",
                displayFormat: "Column: {1}. Sales: {0}" // for example, "Column: Total Amount. Sales: $1234"
            },
            // ...
            ]
        }
    });
});

Angular

app.component.html

app.module.ts

<dx-data-grid ... >
    <dxo-summary>
        <dxi-group-item
            column="SaleAmount"
            summaryType="sum"
            showInColumn="TotalAmount"
            valueFormat="currency"
            displayFormat="Column: {1}. Sales: {0}"> <!-- for example, "Column: Total Amount. Sales: $1234" -->
        </dxi-group-item>
    </dxo-summary>
</dx-data-grid>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template> 
    <DxDataGrid ... >
        <DxSummary>
            <DxGroupItem
                column="SaleAmount"
                summary-type="sum"
                show-in-column="TotalAmount"
                value-format="currency" 
                display-format="Column: {1}. Sales: {0}" /> <!-- for example, "Column: Total Amount. Sales: $1234" -->
        </DxSummary>
    </DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, { DxSummary, DxGroupItem } from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxSummary,
        DxGroupItem
    }
}
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { DataGrid, Summary, GroupItem } from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid>
                <Summary
                    <GroupItem 
                        column="SaleAmount" 
                        summaryType="sum" 
                        showInColumn="TotalAmount" 
                        valueFormat="currency" 
                        displayFormat="Column: {1}. Sales: {0}" /> <!-- for example, "Column: Total Amount. Sales: $1234" -->
                </Summary>
            </DataGrid>
        );
    }
}
export default App;

View Demo

Use the customizeText property for more advanced text customizations.

name

Specifies the group summary item's identifier.

Type:

String

| undefined

Default Value: undefined

Use this name to access the summary item in callback functions like calculateCustomSummary.

showInColumn

Specifies the column that must hold the summary item when this item is displayed in the group footer or aligned by a column in the group row.

Type:

String

| undefined

Default Value: undefined

A group summary item can be forced to be displayed in the group row by the column that provides data for this item. Alternatively, you can place an item to the group footer where the item is also held by the column that provides data for it. If you need to place an item in another column, assign the name, data field or caption of this column to the showInColumn property.

showInGroupFooter

Specifies whether or not a summary item must be displayed in the group footer.

Type:

Boolean

Default Value: false

By default, summary items are displayed as a part of a group row. If you need a summary item to be displayed in the group footer, assign true to the showInGroupFooter property of this item. This summary item will be located in the column that provides data for it. If you want another column to hold the summary item, specify the showInColumn property of this item.

View Demo

skipEmptyValues

Specifies whether to skip empty strings, null, and undefined values when calculating a summary. Does not apply when you use a remote data source.

Type:

Boolean

Specified in a summary configuration object, this property affects an individual summary item. If you need to apply a single setting to all summaries in a grid, specify the skipEmptyValues property in the summary object.

jQuery

JavaScript

$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            // ...
            skipEmptyValues: false
        }
    });
});

Angular

HTML

TypeScript

<dx-data-grid ... >
    <dxo-summary [skipEmptyValues]="false"></dxo-summary>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxSummary
            :skip-empty-values="true">
            <!-- ... -->
        </DxSummary>
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxSummary
} from 'devextreme-vue/data-grid';

export default {
    components: {              
        DxDataGrid,
        DxSummary
    },
    // ...
}
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Summary
} from 'devextreme-react/data-grid';

export default function App() {
    return (
        <DataGrid ... >
            <Summary
                skipEmptyValues={true}>
                {/* ... */}
            </Summary>
        </DataGrid>
    );
}

NOTE

Summaries of the count type do not skip empty values regardless of the skipEmptyValues property. However, you can implement a custom summary that skips empty values. Refer to the global skipEmptyValues description for a code example.

summaryType

Specifies how to aggregate data for the group summary item.

Type:

SummaryType

String

| undefined

Default Value: undefined

The following summary types are supported:

"sum"
"min"
"max"
"avg"
"count"
"custom"
Applies a custom client-side aggregate function (calculateCustomSummary). Refer to Client-Side Data Aggregation for more information.
Any other type
Applies a custom server-side aggregate function. Refer to Server-Side Data Aggregation for more information.

View Demo

valueFormat

Specifies a summary item value's display format.

Type:

Format

| undefined

Default Value: undefined

See the format section for information on accepted values.

View Demo

NOTE

This option has no effect if a summary item value is not a number or Date.

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery DataGrid - summary.groupItems

jQuery

Angular

Vue

React

See Also

alignByColumn

See Also

column

See Also

customizeText

See Also

displayFormat

jQuery

Angular

Vue

React

name

showInColumn

See Also

showInGroupFooter

See Also

skipEmptyValues

jQuery

Angular

Vue

React

summaryType

See Also

valueFormat

See Also