React DataGrid - 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 UI component 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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxColumn data-field="OrderNumber" />
        <DxColumn data-field="Price" />
        <DxSummary>
            <DxGroupItem
                column="OrderNumber"
                summary-type="count"
            />
            <DxGroupItem
                column="Price"
                summary-type="sum"
            />
            <DxGroupItem
                column="Price"
                summary-type="max"
            />
        </DxSummary>
    </DxDataGrid>
</template>

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

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

export default {
    components: {              
        DxDataGrid,
        DxColumn,
        DxSummary,
        DxGroupItem
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

export default function App() {
    return (
        <DataGrid ... >
            <Column dataField="OrderNumber" />
            <Column dataField="Price" />
            <Summary>
                <GroupItem
                    column="OrderNumber"
                    summaryType="count"
                />
                <GroupItem
                    column="Price"
                    summaryType="sum"
                />
                <GroupItem
                    column="Price"
                    summaryType="max"
                />
            </Summary>
        </DataGrid>
    );
}

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 property. Specify the showInColumn property to show it in another column. This property can also be applied to items shown in the group footer.

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: ["OrderNumber", "City", "Price"],
        summary: {
            groupItems: [{
                column: "OrderNumber",
                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="OrderNumber"
            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="max"
            [showInGroupFooter]="true"
            showInColumn="City">
        </dxi-group-item>
    </dxo-summary>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxColumn data-field="OrderNumber" />
        <DxColumn data-field="City" />
        <DxColumn data-field="Price" />
        <DxSummary>
            <DxGroupItem
                column="OrderNumber"
                summary-type="count"
                :align-by-column="true"
            />
            <DxGroupItem
                column="Price"
                summary-type="sum"
                :show-in-group-footer="true"
            />
            <DxGroupItem
                column="Price"
                summary-type="max"
                :show-in-group-footer="true"
                show-in-column="City"
            />
        </DxSummary>
    </DxDataGrid>
</template>

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

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

export default {
    components: {              
        DxDataGrid,
        DxColumn,
        DxSummary,
        DxGroupItem
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

export default function App() {
    return (
        <DataGrid ... >
            <Column dataField="OrderNumber" />
            <Column dataField="City" />
            <Column dataField="Price" />
            <Summary>
                <GroupItem
                    column="OrderNumber"
                    summaryType="count"
                    alignByColumn
                />
                <GroupItem
                    column="Price"
                    summaryType="sum"
                    showInGroupFooter
                />
                <GroupItem
                    column="Price"
                    summaryType="max"
                    showInGroupFooter
                    showInColumn="City"
                />
            </Summary>
        </DataGrid>
    );
}

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 property.

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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxSummary>
            <DxGroupItem
                column="OrderNumber"
                summary-type="count"
                name="Total Count"
            />
        </DxSummary>
        <DxSortByGroupSummaryInfo 
            summary-item="Total Count"  <!-- or "count" | 0 | "OrderNumber" -->
            sort-order="desc"           <!-- or "asc" -->
        />
    </DxDataGrid>
</template>

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

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

export default {
    components: {              
        DxDataGrid,
        DxSummary,
        DxGroupItem,
        DxSortByGroupSummaryInfo
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

export default function App() {
    return (
        <DataGrid ... >
            <Summary>
                <GroupItem
                    column="OrderNumber"
                    summaryType="count"
                    name="Total Count"
                />
            </Summary>
            <SortByGroupSummaryInfo 
                summaryItem="Total Count"  {/* or "count" | 0 | "OrderNumber" */}
                sortOrder="desc"           {/* or "asc" */}
            />
        </DataGrid>
    );
}

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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxSummary>
            <DxGroupItem
                column="SaleAmount"
                summary-type="max"
            />
            <DxGroupItem
                column="TotalAmount"
                summary-type="max"
            />
        </DxSummary>
        <DxSortByGroupSummaryInfo 
            summary-item="max"
            group-column="TotalAmount"
            sort-order="asc"
        />
        <DxSortByGroupSummaryInfo 
            summary-item="max"
            group-column="SaleAmount"
            sort-order="desc"
        />
    </DxDataGrid>
</template>

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

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

export default {
    components: {              
        DxDataGrid,
        DxSummary,
        DxGroupItem,
        DxSortByGroupSummaryInfo
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

export default function App() {
    return (
        <DataGrid ... >
            <Summary>
                <GroupItem
                    column="SaleAmount"
                    summaryType="max"
                />
                <GroupItem
                    column="TotalAmount"
                    summaryType="max"
                />
            </Summary>
            <SortByGroupSummaryInfo 
                summaryItem="max"
                groupColumn="TotalAmount"
                sortOrder="asc"
            />
            <SortByGroupSummaryInfo 
                summaryItem="max"
                groupColumn="SaleAmount"
                sortOrder="desc"
            />
        </DataGrid>
    );
}