Custom aggregate in Vue Grid component
28 Mar 20234 minutes to read
Sometimes you can have a scenario to calculate aggregate value using your own aggregate function, we can achieve this behavior using the custom aggregate option. To use custom aggregation, specify the type
as Custom
and provide the custom aggregate function in the customAggregate
property.
The custom aggregate function will be invoked with different arguments for Total and Group aggregations.
-
Total aggregation - the custom aggregate function will be called with whole data and the current
AggregateColumn
object. -
Group aggregation - it will be called with current group details and the
AggregateColumn
object.
<template>
<div id="app">
<ejs-grid :dataSource='data' height='268px'>
<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='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 columnName="ShipCountry" type="Custom" :customAggregate="customAggregateFn" :footerTemplate='footerTemp'></e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Aggregate } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
footerTemp: function () {
return { template : Vue.component('footerTemplate', {
template: `<span>Brazil Count: </span>`,
data () {return { data: {}};}
})
}
}
};
},
methods: {
customAggregateFn : function (data) {
return data.result.filter((item) => item.ShipCountry === 'Brazil').length;
}
},
provide: {
grid: [Aggregate]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
To access the custom aggregate value inside template, use the key as
Custom
.