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.

app.vue

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