Aggregate Groups in FlexGrid

The FlexGrid columns have an aggregate property that allows you to show data summaries for the whole grid or for each group.

To show group aggregates, set the aggregate property on the columns that you want to aggregate, and create groups by dragging the column headers into the group panel above the grid.

Notice how the group rows contain the sum of the 'Sales' and 'Expenses' columns for each group. The aggregates are updated automatically when you edit the data.

import * as wjGrid from '@grapecity/wijmo.grid';

// create group panel grid
var theGrid = new wjGrid.FlexGrid('#theGrid', {
    autoGenerateColumns: false,
    columns: [ // column definitions with aggregates
        { binding: 'id', header: 'ID', width: 60, isReadOnly: true },
        { binding: 'country', header: 'Country' },
        { binding: 'product', header: 'Product' },
        { binding: 'sales', header: 'Sales', aggregate: 'Sum' },
        { binding: 'expenses', header: 'Expenses', aggregate: 'Sum' }
    ],
    itemsSource: data
});