Group and caption aggregate in Vue Grid component
13 Jul 202424 minutes to read
Group footer and caption aggregates in the Syncfusion Vue Grid component allow you to calculate aggregate values based on the current group items. These aggregate values can be displayed in the group footer cells and group caption cells, respectively. To achieve this, you can use the groupFooterTemplate and groupCaptionTemplate properties of the AggregateColumnDirective.
When working with group aggregates in Syncfusion Grid, it is important to set the property allowGrouping of the column to true.
To maintain grouped columns in the grid after grouping, set showGroupedColumn to true.
Group footer aggregates
Group footer aggregates are displayed in the footer cells of each group. These cells appear at the bottom of each group and provide aggregate values based on the grouped data. To display group footer aggregates, you need to provide a template using the groupFooterTemplate property. The template will be used to render the aggregate values in the group footer cells.
Here’s an example that demonstrates how to use group footer aggregates in the Syncfusion Vue Grid component:
<template>
<div id="app">
<ejs-grid :dataSource='data' height='290px' :allowGrouping="true" :groupSettings="groupOptions">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='OrderDate' headerText='Order Date' format='yMd' width=120 type='date'></e-column>
<e-column field='Freight' format='C2' width=150></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column type="Sum" field="Freight" format="C2" :groupFooterTemplate ='footerSum'></e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
</div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnsDirective as EColumns, ColumnDirective as EColumn, AggregateDirective as EAggregate, AggregatesDirective as EAggregates, Group, Aggregate } from "@syncfusion/ej2-vue-grids";
import { provide, createApp } from "vue";
import { data } from './datasource.js';
const app = createApp();
const groupOptions = {showDropArea: false, columns: ['ShipCountry'] };
const footerSum = function () {
return { template : app.component('sumTemplate', {
template: `<span>Sum: {{data.Sum}}</span>`,
data () {return { data: {}};}
})
}
}
provide('grid', [Group, Aggregate]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/tailwind.css";
</style><template>
<div id="app">
<ejs-grid :dataSource='data' height='290px' :allowGrouping="true" :groupSettings="groupOptions">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='OrderDate' headerText='Order Date' format='yMd' width=120 type='date'></e-column>
<e-column field='Freight' format='C2' width=150></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column type="Sum" field="Freight" format="C2" :groupFooterTemplate ='footerSum'></e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnDirective, ColumnsDirective, AggregateDirective, AggregatesDirective, Group, Aggregate } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
import { createApp } from "vue";
const app = createApp();
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
"e-aggregates":AggregatesDirective,
"e-aggregate":AggregateDirective
},
data() {
return {
data: data,
groupOptions: {showDropArea: false, columns: ['ShipCountry'] },
footerSum: function () {
return { template : app.component('sumTemplate', {
template: `<span>Sum: {{data.Sum}}</span>`,
data () {return { data: {}};}
})
}
}
};
},
provide : {
grid: [Group, Aggregate]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/tailwind.css";
</style>
- The aggregate values must be accessed inside the template using their corresponding type name.
Group caption aggregates
Group caption aggregates are displayed in the caption cells of each group. These cells appear at the top of each group and provide a summary of the grouped data. To display group caption aggregates, you can use the groupCaptionTemplate property. This property allows you to define a template that will be used to display the aggregate values in the group caption cells.
Here’s an example that demonstrates how to use group and caption aggregates in the Syncfusion Vue Grid component:
<template>
<div id="app">
<ejs-grid :dataSource='data' height='290px' :allowGrouping="true" :groupSettings="groupOptions">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='OrderDate' headerText='Order Date' format='yMd' width=120 type='date'></e-column>
<e-column field='Freight' format='C2' width=150></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column type="Sum" field="Freight" format="C2" :groupCaptionTemplate ='footerSum'></e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
</div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnsDirective as EColumns, ColumnDirective as EColumn, AggregateDirective as EAggregate, AggregatesDirective as EAggregates, Group, Aggregate } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
import { provide, createApp } from "vue";
const app = createApp();
const groupOptions = {showDropArea: false, columns: ['ShipCountry'] };
const footerSum = function () {
return { template : app.component('sumTemplate', {
template: `<span>Sum: {{data.Sum}}</span>`,
data () {return { data: {}};}
})
}
}
provide('grid', [Group, Aggregate]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/tailwind.css";
</style><template>
<div id="app">
<ejs-grid :dataSource='data' height='290px' :allowGrouping="true" :groupSettings="groupOptions">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='OrderDate' headerText='Order Date' format='yMd' width=120 type='date'></e-column>
<e-column field='Freight' format='C2' width=150></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column type="Sum" field="Freight" format="C2" :groupCaptionTemplate ='footerSum'></e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnDirective, ColumnsDirective, AggregateDirective, AggregatesDirective, Group, Aggregate } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
import { createApp } from "vue";
const app = crateApp();
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
"e-aggregates":AggregatesDirective,
"e-aggregate":AggregateDirective
},
data() {
return {
data: data,
groupOptions: {showDropArea: false, columns: ['ShipCountry'] },
footerSum: function () {
return { template : app.component('sumTemplate', {
template: `<span>Sum: {{data.Sum}}</span>`,
data () {return { data: {}};}
})
}
}
};
},
provide : {
grid: [Group, Aggregate]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/tailwind.css";
</style>The group total summary in Syncfusion Grid is calculated based on the current page records for each group by default.
If you require aggregates for all the data in the grid, you can enable the disablePageWiseAggregates property.
Disable page wise aggregates for grouping
In some cases, you may want to disable the page-wise aggregates for grouping in the Syncfusion Vue Grid component. By default, when grouping is enabled with paging, the grid calculates the aggregates for each page separately. However, you can choose to disable this behavior and calculate aggregates for the entire grouped data instead. This can be achieved by setting the disablePageWiseAggregates property to true.
<template>
<div id="app">
<ejs-grid :dataSource='data' height='290px' :allowPaging="true" :allowGrouping="true" :groupSettings="groupOptions">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='OrderDate' headerText='Order Date' format='yMd' width=120 type='date'></e-column>
<e-column field='Freight' format='C2' width=150></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column type="Sum" field="Freight" format="C2" :groupFooterTemplate ='footerSum'></e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column type="Average" field="Freight" format="C2" :groupCaptionTemplate ='footerAvg'></e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
</div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnsDirective as EColumns, ColumnDirective as EColumn, AggregateDirective as EAggregate, AggregatesDirective as EAggregates, Group, Page, Aggregate } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
import { provide, createApp } from "vue";
const app = createApp();
const groupOptions = {showDropArea: false, columns: ['ShipCountry'], disablePageWiseAggregates: true };
const footerSum = function () {
return { template : app.component('sumTemplate', {
template: `<span>Sum: {{data.Sum}}</span>`,
data () {return { data: {}};}
})
}
}
const footerAvg = function () {
return { template : app.component('maxTemplate', {
template: `<span>Average: {{data.Average}}</span>`,
data () {return { data: {}};}
})
}
}
provide('grid', [Group, Page, Aggregate]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/tailwind.css";
</style><template>
<div id="app">
<ejs-grid :dataSource='data' height='290px' :allowPaging="true" :allowGrouping="true" :groupSettings="groupOptions">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='OrderDate' headerText='Order Date' format='yMd' width=120 type='date'></e-column>
<e-column field='Freight' format='C2' width=150></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column type="Sum" field="Freight" format="C2" :groupFooterTemplate ='footerSum'></e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column type="Average" field="Freight" format="C2" :groupCaptionTemplate ='footerAvg'></e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnDirective, ColumnsDirective, AggregateDirective, AggregatesDirective, Group, Page, Aggregate } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
import { createApp } from "vue";
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
"e-aggregates":AggregatesDirective,
"e-aggregate":AggregateDirective
},
data() {
return {
data: data,
groupOptions: {showDropArea: false, columns: ['ShipCountry'], disablePageWiseAggregates: true },
footerSum: function () {
return { template : Vue.component('sumTemplate', {
template: `<span>Sum: {{data.Sum}}</span>`,
data () {return { data: {}};}
})
}
},
footerAvg: function () {
return { template : Vue.component('maxTemplate', {
template: `<span>Average: {{data.Average}}</span>`,
data () {return { data: {}};}
})
}
}
};
},
provide : {
grid: [Group, Page, Aggregate]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/tailwind.css";
</style>