Aggregates

Updated on Aug 14, 2026

The Kendo UI for Vue Data Grid displays aggregate values for grouped data in group footer rows.

To group Grid data, use the group and groupable props.

To display aggregates in group footer rows:

1. Add aggregate descriptors to the group state.
2. Set the footer option of GridGroupableSettings to display group footer rows.
3. Process the data with the aggregate descriptors and provide a group-footer cell template that renders the aggregate values.

The following example demonstrates how to configure the Grid to display aggregate values (total, average, min, and max) in the group footer rows by setting up cell rendering logic for grouped data.

Loading ...

Suggested Links

• Grouping Basics
• Grid API Reference
• Grid Custom Cell with Grouping and Selection
• Grid Custom Template, Row Details, and Grouping