Vue

Search results

Getting started with Vue Grid component

23 Jun 2022 / 11 minutes to read

This section explains you the steps required to create a simple Grid and demonstrate the basic usage of the Grid component in a Vue environment.

To get start quickly with Vue Grid, you can check on this video:

Setup Vue Environment

You can use Vue CLI to setup your vue applications. To install Vue CLI use the following commands.

npm install -g @vue/cli
npm install -g @vue/cli-init

Create a Vue Application

Start a new Vue application using below Vue CLI command.

vue init webpack-simple quickstart

cd quickstart
npm install

Adding Syncfusion Grid package

All the available Essential JS 2 packages are published in npmjs.com registry.

To install Vue Grid component, use the following command

npm install @syncfusion/ej2-vue-grids --save

The —save will instruct NPM to include the grid package inside of the dependencies section of the package.json.

Registering Grid Component

You can register the Grid component in your application by using the Vue.use().

Refer to the code example given below.

import { GridPlugin } from '@syncfusion/ej2-vue-grids';

Vue.use(GridPlugin);

Registering GridPlugin in vue, will register the grid component along with its required child directives globally.

Adding CSS Reference

The Grid has different themes. They are:

Material
Office 365
Fabric
Bootstrap
High Contrast

import components CSS as given below in style section of the App.vue file. Here Material theme is used for this sample.

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Adding Grid Component

Add the Vue Grid by using ejs-grid selector in template section of the App.vue file.

{% raw %}

<template>
  <div id="app">
  <ejs-grid> </ejs-grid>
  </div>
</template>

<script>
import Vue from 'vue';
import { GridPlugin } from '@syncfusion/ej2-vue-grids';

Vue.use(GridPlugin);
export default {
  data () {
return {
}
  }
}
</script>

{% endraw %}

Defining Row Data

Data for the Grid component is bind by using dataSource property and value is defined in the vue component. It accepts either array of JavaScript object or DataManager instance.

<template>
<div id="app">
    <ejs-grid :dataSource="data"> </ejs-grid>
</div>
</template>

<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";

Vue.use(GridPlugin);

export default {
  data () {
return {
  data: [
      { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
      { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 },
      { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83 },
      { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34 },
      { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3 },
      { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17 },
      { OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98 },
      { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33 },
      { OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97 }
  ]
}
  }
}
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Defining Columns

The Grid has an option to define columns as directives. In these column directives, we have properties to customize columns. Let’s check the properties used here:

We have added field to map with a property name an array of JavaScript objects.
We have added headerText to change the title of columns.
We have used textAlign to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, we need to define textAlign as Right.
Also, we have used another useful property, format. Using this, we can format number and date values to standard or custom formats. Here, we have defined it for the conversion of numeric values to currency.

<ejs-grid :dataSource="data">
<e-columns>
  <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
  <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
  <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
</e-columns>
</ejs-grid>

Module injection

To create Vue Grid with additional features, inject the required modules. The following modules are used to extend Grid’s basic functionality.

Page - Inject this module to use paging feature.
Sort - Inject this module to use sorting feature.
Filter - Inject this module to use filtering feature.
Group - Inject this module to use grouping feature.
Aggregate - Inject this module to use aggregate feature.

Additional feature modules are available here

Enable Paging

The paging feature enables users to view the Grid record in a paged view. It can be enabled by setting allowPaging property to true. Also, need to inject the Page module in the provide section as follows.

If we didn’t inject the Page module, then the pager will not be rendered in Grid. The pager can be customized using pageSettings property.

Source

Preview

app.vue

datasource.js

<template>
<div id="app">
    <ejs-grid :dataSource="data" :allowPaging="true" :pageSettings='pageSettings'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
      </e-columns>
    </ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";

Vue.use(GridPlugin);

export default {
  data() {
return {
  data: [
      { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
      { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 },
      { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83 },
      { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34 },
      { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3 },
      { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17 },
      { OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98 },
      { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33 },
      { OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97 }
  ],
  pageSettings: { pageSize: 5 }
};
  },
  provide: {
grid: [Page]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>


{% endraw %}

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.data = [
        {
           "OrderID":10248,
           "CustomerID":"VINET",
           "OrderDate":"1996-07-04T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":32.38,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10249,
           "CustomerID":"TOMSP",
           "OrderDate":"1996-07-05T00:00:00.000Z",
           "ShippedDate":"1996-07-10T00:00:00.000Z",
           "Freight":11.61,
           "ShipName":"Toms Spezialitäten",
           "ShipAddress":"Luisenstr. 48",
           "ShipCity":"Münster",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10250,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-12T00:00:00.000Z",
           "Freight":65.83,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10251,
           "CustomerID":"VICTE",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":41.34,
           "ShipName":"Victuailles en stock",
           "ShipAddress":"2, rue du Commerce",
           "ShipCity":"Lyon",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10252,
           "CustomerID":"SUPRD",
           "OrderDate":"1996-07-09T00:00:00.000Z",
           "ShippedDate":"1996-07-11T00:00:00.000Z",
           "Freight":51.3,
           "ShipName":"Suprêmes délices",
           "ShipAddress":"Boulevard Tirou, 255",
           "ShipCity":"Charleroi",
           "ShipRegion":null,
           "ShipCountry":"Belgium"
        },
        {
           "OrderID":10253,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-10T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":58.17,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10254,
           "CustomerID":"CHOPS",
           "OrderDate":"1996-07-11T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":22.98,
           "ShipName":"Chop-suey Chinese",
           "ShipAddress":"Hauptstr. 31",
           "ShipCity":"Bern",
           "ShipRegion":null,
           "ShipCountry":"Switzerland",
           "Verified": true
        },
        {
           "OrderID":10255,
           "CustomerID":"RICSU",
           "OrderDate":"1996-07-12T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":148.33,
           "ShipName":"Richter Supermarkt",
           "ShipAddress":"Starenweg 5",
           "ShipCity":"Genève",
           "ShipRegion":null,
           "ShipCountry":"Switzerland"
        },
        {
           "OrderID":10256,
           "CustomerID":"WELLI",
           "OrderDate":"1996-07-15T00:00:00.000Z",
           "ShippedDate":"1996-07-17T00:00:00.000Z",
           "Freight":13.97,
           "ShipName":"Wellington Importadora",
           "ShipAddress":"Rua do Mercado, 12",
           "ShipCity":"Resende",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10257,
           "CustomerID":"HILAA",
           "OrderDate":"1996-07-16T00:00:00.000Z",
           "ShippedDate":"1996-07-22T00:00:00.000Z",
           "Freight":81.91,
           "ShipName":"HILARION-Abastos",
           "ShipAddress":"Carrera 22 con Ave. Carlos Soublette #8-35",
           "ShipCity":"San Cristóbal",
           "ShipRegion":"Táchira",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10258,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-17T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":140.51,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10259,
           "CustomerID":"CENTC",
           "OrderDate":"1996-07-18T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":3.25,
           "ShipName":"Centro comercial Moctezuma",
           "ShipAddress":"Sierras de Granada 9993",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico",
           "Verified": true
        },
        {
           "OrderID":10260,
           "CustomerID":"OTTIK",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-29T00:00:00.000Z",
           "Freight":55.09,
           "ShipName":"Ottilies Käseladen",
           "ShipAddress":"Mehrheimerstr. 369",
           "ShipCity":"Köln",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10261,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-30T00:00:00.000Z",
           "Freight":3.05,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10262,
           "CustomerID":"RATTC",
           "OrderDate":"1996-07-22T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":48.29,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA",
           "Verified": true
        },
        {
           "OrderID":10263,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-23T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":146.06,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "Verified": true,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10264,
           "CustomerID":"FOLKO",
           "OrderDate":"1996-07-24T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":3.67,
           "ShipName":"Folk och fä HB",
           "ShipAddress":"Åkergatan 24",
           "ShipCity":"Bräcke",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10265,
           "CustomerID":"BLONP",
           "OrderDate":"1996-07-25T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":55.28,
           "ShipName":"Blondel père et fils",
           "ShipAddress":"24, place Kléber",
           "ShipCity":"Strasbourg",
           "ShipRegion":null,
           "ShipCountry":"France"
        },
        {
           "OrderID":10266,
           "CustomerID":"WARTH",
           "OrderDate":"1996-07-26T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":25.73,
           "ShipName":"Wartian Herkku",
           "ShipAddress":"Torikatu 38",
           "ShipCity":"Oulu",
           "ShipRegion":null,
           "ShipCountry":"Finland"
        },
        {
           "OrderID":10267,
           "CustomerID":"FRANK",
           "OrderDate":"1996-07-29T00:00:00.000Z",
           "ShippedDate":"1996-08-06T00:00:00.000Z",
           "Freight":208.58,
           "ShipName":"Frankenversand",
           "ShipAddress":"Berliner Platz 43",
           "ShipCity":"München",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10268,
           "CustomerID":"GROSR",
           "OrderDate":"1996-07-30T00:00:00.000Z",
           "ShippedDate":"1996-08-02T00:00:00.000Z",
           "Freight":66.29,
           "ShipName":"GROSELLA-Restaurante",
           "ShipAddress":"5ª Ave. Los Palos Grandes",
           "ShipCity":"Caracas",
           "ShipRegion":"DF",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10269,
           "CustomerID":"WHITC",
           "OrderDate":"1996-07-31T00:00:00.000Z",
           "ShippedDate":"1996-08-09T00:00:00.000Z",
           "Freight":4.56,
           "ShipName":"White Clover Markets",
           "ShipAddress":"1029 - 12th Ave. S.",
           "ShipCity":"Seattle",
           "ShipRegion":"WA",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10270,
           "CustomerID":"WARTH",
           "OrderDate":"1996-08-01T00:00:00.000Z",
           "ShippedDate":"1996-08-02T00:00:00.000Z",
           "Freight":136.54,
           "ShipName":"Wartian Herkku",
           "ShipAddress":"Torikatu 38",
           "ShipCity":"Oulu",
           "ShipRegion":null,
           "ShipCountry":"Finland"
        },
        {
           "OrderID":10271,
           "CustomerID":"SPLIR",
           "OrderDate":"1996-08-01T00:00:00.000Z",
           "ShippedDate":"1996-08-30T00:00:00.000Z",
           "Freight":4.54,
           "ShipName":"Split Rail Beer & Ale",
           "ShipAddress":"P.O. Box 555",
           "ShipCity":"Lander",
           "ShipRegion":"WY",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10272,
           "CustomerID":"RATTC",
           "OrderDate":"1996-08-02T00:00:00.000Z",
           "ShippedDate":"1996-08-06T00:00:00.000Z",
           "Freight":98.03,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10273,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-05T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":76.07,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10274,
           "CustomerID":"VINET",
           "OrderDate":"1996-08-06T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":6.01,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France"
        },
        {
           "OrderID":10275,
           "CustomerID":"MAGAA",
           "OrderDate":"1996-08-07T00:00:00.000Z",
           "ShippedDate":"1996-08-09T00:00:00.000Z",
           "Freight":26.93,
           "ShipName":"Magazzini Alimentari Riuniti",
           "ShipAddress":"Via Ludovico il Moro 22",
           "ShipCity":"Bergamo",
           "ShipRegion":null,
           "ShipCountry":"Italy"
        },
        {
           "OrderID":10276,
           "CustomerID":"TORTU",
           "OrderDate":"1996-08-08T00:00:00.000Z",
           "ShippedDate":"1996-08-14T00:00:00.000Z",
           "Freight":13.84,
           "ShipName":"Tortuga Restaurante",
           "ShipAddress":"Avda. Azteca 123",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico"
        },
        {
           "OrderID":10277,
           "CustomerID":"MORGK",
           "OrderDate":"1996-08-09T00:00:00.000Z",
           "ShippedDate":"1996-08-13T00:00:00.000Z",
           "Freight":125.77,
           "ShipName":"Morgenstern Gesundkost",
           "ShipAddress":"Heerstr. 22",
           "ShipCity":"Leipzig",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10278,
           "CustomerID":"BERGS",
           "OrderDate":"1996-08-12T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":92.69,
           "ShipName":"Berglunds snabbköp",
           "ShipAddress":"Berguvsvägen  8",
           "ShipCity":"Luleå",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10279,
           "CustomerID":"LEHMS",
           "OrderDate":"1996-08-13T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":25.83,
           "ShipName":"Lehmanns Marktstand",
           "ShipAddress":"Magazinweg 7",
           "ShipCity":"Frankfurt a.M.",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10280,
           "CustomerID":"BERGS",
           "OrderDate":"1996-08-14T00:00:00.000Z",
           "ShippedDate":"1996-09-12T00:00:00.000Z",
           "Freight":8.98,
           "ShipName":"Berglunds snabbköp",
           "ShipAddress":"Berguvsvägen  8",
           "ShipCity":"Luleå",
           "ShipRegion":null,
           "ShipCountry":"Sweden",
           "Verified": true
        },
        {
           "OrderID":10281,
           "CustomerID":"ROMEY",
           "OrderDate":"1996-08-14T00:00:00.000Z",
           "ShippedDate":"1996-08-21T00:00:00.000Z",
           "Freight":2.94,
           "ShipName":"Romero y tomillo",
           "ShipAddress":"Gran Vía, 1",
           "ShipCity":"Madrid",
           "ShipRegion":null,
           "ShipCountry":"Spain"
        },
        {
           "OrderID":10282,
           "CustomerID":"ROMEY",
           "OrderDate":"1996-08-15T00:00:00.000Z",
           "ShippedDate":"1996-08-21T00:00:00.000Z",
           "Freight":12.69,
           "ShipName":"Romero y tomillo",
           "ShipAddress":"Gran Vía, 1",
           "ShipCity":"Madrid",
           "ShipRegion":null,
           "ShipCountry":"Spain"
        },
        {
           "OrderID":10283,
           "CustomerID":"LILAS",
           "OrderDate":"1996-08-16T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":84.81,
           "ShipName":"LILA-Supermercado",
           "ShipAddress":"Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
           "ShipCity":"Barquisimeto",
           "ShipRegion":"Lara",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10284,
           "CustomerID":"LEHMS",
           "OrderDate":"1996-08-19T00:00:00.000Z",
           "ShippedDate":"1996-08-27T00:00:00.000Z",
           "Freight":76.56,
           "ShipName":"Lehmanns Marktstand",
           "ShipAddress":"Magazinweg 7",
           "ShipCity":"Frankfurt a.M.",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10285,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-20T00:00:00.000Z",
           "ShippedDate":"1996-08-26T00:00:00.000Z",
           "Freight":76.83,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10286,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-21T00:00:00.000Z",
           "ShippedDate":"1996-08-30T00:00:00.000Z",
           "Freight":229.24,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10287,
           "CustomerID":"RICAR",
           "OrderDate":"1996-08-22T00:00:00.000Z",
           "ShippedDate":"1996-08-28T00:00:00.000Z",
           "Freight":12.76,
           "ShipName":"Ricardo Adocicados",
           "ShipAddress":"Av. Copacabana, 267",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10288,
           "CustomerID":"REGGC",
           "OrderDate":"1996-08-23T00:00:00.000Z",
           "ShippedDate":"1996-09-03T00:00:00.000Z",
           "Freight":7.45,
           "ShipName":"Reggiani Caseifici",
           "ShipAddress":"Strada Provinciale 124",
           "ShipCity":"Reggio Emilia",
           "ShipRegion":null,
           "ShipCountry":"Italy"
        },
        {
           "OrderID":10289,
           "CustomerID":"BSBEV",
           "OrderDate":"1996-08-26T00:00:00.000Z",
           "ShippedDate":"1996-08-28T00:00:00.000Z",
           "Freight":22.77,
           "ShipName":"B's Beverages",
           "ShipAddress":"Fauntleroy Circus",
           "ShipCity":"London",
           "ShipRegion":null,
           "ShipCountry":"UK"
        },
        {
           "OrderID":10290,
           "CustomerID":"COMMI",
           "OrderDate":"1996-08-27T00:00:00.000Z",
           "ShippedDate":"1996-09-03T00:00:00.000Z",
           "Freight":79.7,
           "ShipName":"Comércio Mineiro",
           "ShipAddress":"Av. dos Lusíadas, 23",
           "ShipCity":"Sao Paulo",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10291,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-08-27T00:00:00.000Z",
           "ShippedDate":"1996-09-04T00:00:00.000Z",
           "Freight":6.4,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10292,
           "CustomerID":"TRADH",
           "OrderDate":"1996-08-28T00:00:00.000Z",
           "ShippedDate":"1996-09-02T00:00:00.000Z",
           "Freight":1.35,
           "ShipName":"Tradiçao Hipermercados",
           "ShipAddress":"Av. Inês de Castro, 414",
           "ShipCity":"Sao Paulo",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10293,
           "CustomerID":"TORTU",
           "OrderDate":"1996-08-29T00:00:00.000Z",
           "ShippedDate":"1996-09-11T00:00:00.000Z",
           "Freight":21.18,
           "ShipName":"Tortuga Restaurante",
           "ShipAddress":"Avda. Azteca 123",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico"
        },
        {
           "OrderID":10294,
           "CustomerID":"RATTC",
           "OrderDate":"1996-08-30T00:00:00.000Z",
           "ShippedDate":"1996-09-05T00:00:00.000Z",
           "Freight":147.26,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA"
        }];
});

Enable Sorting

The sorting feature enables the user to order the records. It can be enabled by setting allowSorting property as true. Also, need to inject the Sort module in the provide section as follow. If we didn’t inject the Sort module, then user not able to sort when click on headers. Sorting feature can be customized using sortSettings property.

Source

Preview

app.vue

datasource.js

<template>
<div id="app">
    <ejs-grid :dataSource="data" :allowPaging="true" :allowSorting='true' :pageSettings='pageSettings'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
      </e-columns>
    </ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Sort } from "@syncfusion/ej2-vue-grids";

Vue.use(GridPlugin);

export default {
  data() {
return {
  data: [
      { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
      { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 },
      { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83 },
      { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34 },
      { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3 },
      { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17 },
      { OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98 },
      { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33 },
      { OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97 }
  ],
  pageSettings: { pageSize: 5 }
};
  },
  provide: {
grid: [Page, Sort]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>


{% endraw %}

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.data = [
        {
           "OrderID":10248,
           "CustomerID":"VINET",
           "OrderDate":"1996-07-04T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":32.38,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10249,
           "CustomerID":"TOMSP",
           "OrderDate":"1996-07-05T00:00:00.000Z",
           "ShippedDate":"1996-07-10T00:00:00.000Z",
           "Freight":11.61,
           "ShipName":"Toms Spezialitäten",
           "ShipAddress":"Luisenstr. 48",
           "ShipCity":"Münster",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10250,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-12T00:00:00.000Z",
           "Freight":65.83,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10251,
           "CustomerID":"VICTE",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":41.34,
           "ShipName":"Victuailles en stock",
           "ShipAddress":"2, rue du Commerce",
           "ShipCity":"Lyon",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10252,
           "CustomerID":"SUPRD",
           "OrderDate":"1996-07-09T00:00:00.000Z",
           "ShippedDate":"1996-07-11T00:00:00.000Z",
           "Freight":51.3,
           "ShipName":"Suprêmes délices",
           "ShipAddress":"Boulevard Tirou, 255",
           "ShipCity":"Charleroi",
           "ShipRegion":null,
           "ShipCountry":"Belgium"
        },
        {
           "OrderID":10253,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-10T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":58.17,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10254,
           "CustomerID":"CHOPS",
           "OrderDate":"1996-07-11T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":22.98,
           "ShipName":"Chop-suey Chinese",
           "ShipAddress":"Hauptstr. 31",
           "ShipCity":"Bern",
           "ShipRegion":null,
           "ShipCountry":"Switzerland",
           "Verified": true
        },
        {
           "OrderID":10255,
           "CustomerID":"RICSU",
           "OrderDate":"1996-07-12T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":148.33,
           "ShipName":"Richter Supermarkt",
           "ShipAddress":"Starenweg 5",
           "ShipCity":"Genève",
           "ShipRegion":null,
           "ShipCountry":"Switzerland"
        },
        {
           "OrderID":10256,
           "CustomerID":"WELLI",
           "OrderDate":"1996-07-15T00:00:00.000Z",
           "ShippedDate":"1996-07-17T00:00:00.000Z",
           "Freight":13.97,
           "ShipName":"Wellington Importadora",
           "ShipAddress":"Rua do Mercado, 12",
           "ShipCity":"Resende",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10257,
           "CustomerID":"HILAA",
           "OrderDate":"1996-07-16T00:00:00.000Z",
           "ShippedDate":"1996-07-22T00:00:00.000Z",
           "Freight":81.91,
           "ShipName":"HILARION-Abastos",
           "ShipAddress":"Carrera 22 con Ave. Carlos Soublette #8-35",
           "ShipCity":"San Cristóbal",
           "ShipRegion":"Táchira",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10258,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-17T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":140.51,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10259,
           "CustomerID":"CENTC",
           "OrderDate":"1996-07-18T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":3.25,
           "ShipName":"Centro comercial Moctezuma",
           "ShipAddress":"Sierras de Granada 9993",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico",
           "Verified": true
        },
        {
           "OrderID":10260,
           "CustomerID":"OTTIK",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-29T00:00:00.000Z",
           "Freight":55.09,
           "ShipName":"Ottilies Käseladen",
           "ShipAddress":"Mehrheimerstr. 369",
           "ShipCity":"Köln",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10261,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-30T00:00:00.000Z",
           "Freight":3.05,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10262,
           "CustomerID":"RATTC",
           "OrderDate":"1996-07-22T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":48.29,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA",
           "Verified": true
        },
        {
           "OrderID":10263,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-23T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":146.06,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "Verified": true,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10264,
           "CustomerID":"FOLKO",
           "OrderDate":"1996-07-24T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":3.67,
           "ShipName":"Folk och fä HB",
           "ShipAddress":"Åkergatan 24",
           "ShipCity":"Bräcke",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10265,
           "CustomerID":"BLONP",
           "OrderDate":"1996-07-25T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":55.28,
           "ShipName":"Blondel père et fils",
           "ShipAddress":"24, place Kléber",
           "ShipCity":"Strasbourg",
           "ShipRegion":null,
           "ShipCountry":"France"
        },
        {
           "OrderID":10266,
           "CustomerID":"WARTH",
           "OrderDate":"1996-07-26T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":25.73,
           "ShipName":"Wartian Herkku",
           "ShipAddress":"Torikatu 38",
           "ShipCity":"Oulu",
           "ShipRegion":null,
           "ShipCountry":"Finland"
        },
        {
           "OrderID":10267,
           "CustomerID":"FRANK",
           "OrderDate":"1996-07-29T00:00:00.000Z",
           "ShippedDate":"1996-08-06T00:00:00.000Z",
           "Freight":208.58,
           "ShipName":"Frankenversand",
           "ShipAddress":"Berliner Platz 43",
           "ShipCity":"München",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10268,
           "CustomerID":"GROSR",
           "OrderDate":"1996-07-30T00:00:00.000Z",
           "ShippedDate":"1996-08-02T00:00:00.000Z",
           "Freight":66.29,
           "ShipName":"GROSELLA-Restaurante",
           "ShipAddress":"5ª Ave. Los Palos Grandes",
           "ShipCity":"Caracas",
           "ShipRegion":"DF",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10269,
           "CustomerID":"WHITC",
           "OrderDate":"1996-07-31T00:00:00.000Z",
           "ShippedDate":"1996-08-09T00:00:00.000Z",
           "Freight":4.56,
           "ShipName":"White Clover Markets",
           "ShipAddress":"1029 - 12th Ave. S.",
           "ShipCity":"Seattle",
           "ShipRegion":"WA",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10270,
           "CustomerID":"WARTH",
           "OrderDate":"1996-08-01T00:00:00.000Z",
           "ShippedDate":"1996-08-02T00:00:00.000Z",
           "Freight":136.54,
           "ShipName":"Wartian Herkku",
           "ShipAddress":"Torikatu 38",
           "ShipCity":"Oulu",
           "ShipRegion":null,
           "ShipCountry":"Finland"
        },
        {
           "OrderID":10271,
           "CustomerID":"SPLIR",
           "OrderDate":"1996-08-01T00:00:00.000Z",
           "ShippedDate":"1996-08-30T00:00:00.000Z",
           "Freight":4.54,
           "ShipName":"Split Rail Beer & Ale",
           "ShipAddress":"P.O. Box 555",
           "ShipCity":"Lander",
           "ShipRegion":"WY",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10272,
           "CustomerID":"RATTC",
           "OrderDate":"1996-08-02T00:00:00.000Z",
           "ShippedDate":"1996-08-06T00:00:00.000Z",
           "Freight":98.03,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10273,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-05T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":76.07,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10274,
           "CustomerID":"VINET",
           "OrderDate":"1996-08-06T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":6.01,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France"
        },
        {
           "OrderID":10275,
           "CustomerID":"MAGAA",
           "OrderDate":"1996-08-07T00:00:00.000Z",
           "ShippedDate":"1996-08-09T00:00:00.000Z",
           "Freight":26.93,
           "ShipName":"Magazzini Alimentari Riuniti",
           "ShipAddress":"Via Ludovico il Moro 22",
           "ShipCity":"Bergamo",
           "ShipRegion":null,
           "ShipCountry":"Italy"
        },
        {
           "OrderID":10276,
           "CustomerID":"TORTU",
           "OrderDate":"1996-08-08T00:00:00.000Z",
           "ShippedDate":"1996-08-14T00:00:00.000Z",
           "Freight":13.84,
           "ShipName":"Tortuga Restaurante",
           "ShipAddress":"Avda. Azteca 123",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico"
        },
        {
           "OrderID":10277,
           "CustomerID":"MORGK",
           "OrderDate":"1996-08-09T00:00:00.000Z",
           "ShippedDate":"1996-08-13T00:00:00.000Z",
           "Freight":125.77,
           "ShipName":"Morgenstern Gesundkost",
           "ShipAddress":"Heerstr. 22",
           "ShipCity":"Leipzig",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10278,
           "CustomerID":"BERGS",
           "OrderDate":"1996-08-12T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":92.69,
           "ShipName":"Berglunds snabbköp",
           "ShipAddress":"Berguvsvägen  8",
           "ShipCity":"Luleå",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10279,
           "CustomerID":"LEHMS",
           "OrderDate":"1996-08-13T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":25.83,
           "ShipName":"Lehmanns Marktstand",
           "ShipAddress":"Magazinweg 7",
           "ShipCity":"Frankfurt a.M.",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10280,
           "CustomerID":"BERGS",
           "OrderDate":"1996-08-14T00:00:00.000Z",
           "ShippedDate":"1996-09-12T00:00:00.000Z",
           "Freight":8.98,
           "ShipName":"Berglunds snabbköp",
           "ShipAddress":"Berguvsvägen  8",
           "ShipCity":"Luleå",
           "ShipRegion":null,
           "ShipCountry":"Sweden",
           "Verified": true
        },
        {
           "OrderID":10281,
           "CustomerID":"ROMEY",
           "OrderDate":"1996-08-14T00:00:00.000Z",
           "ShippedDate":"1996-08-21T00:00:00.000Z",
           "Freight":2.94,
           "ShipName":"Romero y tomillo",
           "ShipAddress":"Gran Vía, 1",
           "ShipCity":"Madrid",
           "ShipRegion":null,
           "ShipCountry":"Spain"
        },
        {
           "OrderID":10282,
           "CustomerID":"ROMEY",
           "OrderDate":"1996-08-15T00:00:00.000Z",
           "ShippedDate":"1996-08-21T00:00:00.000Z",
           "Freight":12.69,
           "ShipName":"Romero y tomillo",
           "ShipAddress":"Gran Vía, 1",
           "ShipCity":"Madrid",
           "ShipRegion":null,
           "ShipCountry":"Spain"
        },
        {
           "OrderID":10283,
           "CustomerID":"LILAS",
           "OrderDate":"1996-08-16T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":84.81,
           "ShipName":"LILA-Supermercado",
           "ShipAddress":"Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
           "ShipCity":"Barquisimeto",
           "ShipRegion":"Lara",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10284,
           "CustomerID":"LEHMS",
           "OrderDate":"1996-08-19T00:00:00.000Z",
           "ShippedDate":"1996-08-27T00:00:00.000Z",
           "Freight":76.56,
           "ShipName":"Lehmanns Marktstand",
           "ShipAddress":"Magazinweg 7",
           "ShipCity":"Frankfurt a.M.",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10285,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-20T00:00:00.000Z",
           "ShippedDate":"1996-08-26T00:00:00.000Z",
           "Freight":76.83,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10286,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-21T00:00:00.000Z",
           "ShippedDate":"1996-08-30T00:00:00.000Z",
           "Freight":229.24,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10287,
           "CustomerID":"RICAR",
           "OrderDate":"1996-08-22T00:00:00.000Z",
           "ShippedDate":"1996-08-28T00:00:00.000Z",
           "Freight":12.76,
           "ShipName":"Ricardo Adocicados",
           "ShipAddress":"Av. Copacabana, 267",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10288,
           "CustomerID":"REGGC",
           "OrderDate":"1996-08-23T00:00:00.000Z",
           "ShippedDate":"1996-09-03T00:00:00.000Z",
           "Freight":7.45,
           "ShipName":"Reggiani Caseifici",
           "ShipAddress":"Strada Provinciale 124",
           "ShipCity":"Reggio Emilia",
           "ShipRegion":null,
           "ShipCountry":"Italy"
        },
        {
           "OrderID":10289,
           "CustomerID":"BSBEV",
           "OrderDate":"1996-08-26T00:00:00.000Z",
           "ShippedDate":"1996-08-28T00:00:00.000Z",
           "Freight":22.77,
           "ShipName":"B's Beverages",
           "ShipAddress":"Fauntleroy Circus",
           "ShipCity":"London",
           "ShipRegion":null,
           "ShipCountry":"UK"
        },
        {
           "OrderID":10290,
           "CustomerID":"COMMI",
           "OrderDate":"1996-08-27T00:00:00.000Z",
           "ShippedDate":"1996-09-03T00:00:00.000Z",
           "Freight":79.7,
           "ShipName":"Comércio Mineiro",
           "ShipAddress":"Av. dos Lusíadas, 23",
           "ShipCity":"Sao Paulo",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10291,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-08-27T00:00:00.000Z",
           "ShippedDate":"1996-09-04T00:00:00.000Z",
           "Freight":6.4,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10292,
           "CustomerID":"TRADH",
           "OrderDate":"1996-08-28T00:00:00.000Z",
           "ShippedDate":"1996-09-02T00:00:00.000Z",
           "Freight":1.35,
           "ShipName":"Tradiçao Hipermercados",
           "ShipAddress":"Av. Inês de Castro, 414",
           "ShipCity":"Sao Paulo",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10293,
           "CustomerID":"TORTU",
           "OrderDate":"1996-08-29T00:00:00.000Z",
           "ShippedDate":"1996-09-11T00:00:00.000Z",
           "Freight":21.18,
           "ShipName":"Tortuga Restaurante",
           "ShipAddress":"Avda. Azteca 123",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico"
        },
        {
           "OrderID":10294,
           "CustomerID":"RATTC",
           "OrderDate":"1996-08-30T00:00:00.000Z",
           "ShippedDate":"1996-09-05T00:00:00.000Z",
           "Freight":147.26,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA"
        }];
});

Enable Filtering

The filtering feature enables the user to view the reduced amount of records based on filter criteria. It can be enabled by setting allowFiltering property as true. Also, need to inject the Filter module in the provide section as follow. If we didn’t inject the Filter module, then filter bar will not be rendered in Grid. Filtering feature can be customized using filterSettings property.

Source

Preview

app.vue

datasource.js

<template>
<div id="app">
    <ejs-grid :dataSource="data" :allowPaging="true" :allowSorting='true' :allowFiltering='true'  :pageSettings='pageSettings'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
      </e-columns>
    </ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Sort, Filter } from "@syncfusion/ej2-vue-grids";

Vue.use(GridPlugin);

export default {
  data() {
return {
  data: [
      { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
      { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 },
      { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83 },
      { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34 },
      { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3 },
      { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17 },
      { OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98 },
      { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33 },
      { OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97 }
  ],
  pageSettings: { pageSize: 5 }
};
  },
  provide: {
grid: [Page, Sort, Filter]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>


{% endraw %}

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.data = [
        {
           "OrderID":10248,
           "CustomerID":"VINET",
           "OrderDate":"1996-07-04T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":32.38,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10249,
           "CustomerID":"TOMSP",
           "OrderDate":"1996-07-05T00:00:00.000Z",
           "ShippedDate":"1996-07-10T00:00:00.000Z",
           "Freight":11.61,
           "ShipName":"Toms Spezialitäten",
           "ShipAddress":"Luisenstr. 48",
           "ShipCity":"Münster",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10250,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-12T00:00:00.000Z",
           "Freight":65.83,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10251,
           "CustomerID":"VICTE",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":41.34,
           "ShipName":"Victuailles en stock",
           "ShipAddress":"2, rue du Commerce",
           "ShipCity":"Lyon",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10252,
           "CustomerID":"SUPRD",
           "OrderDate":"1996-07-09T00:00:00.000Z",
           "ShippedDate":"1996-07-11T00:00:00.000Z",
           "Freight":51.3,
           "ShipName":"Suprêmes délices",
           "ShipAddress":"Boulevard Tirou, 255",
           "ShipCity":"Charleroi",
           "ShipRegion":null,
           "ShipCountry":"Belgium"
        },
        {
           "OrderID":10253,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-10T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":58.17,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10254,
           "CustomerID":"CHOPS",
           "OrderDate":"1996-07-11T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":22.98,
           "ShipName":"Chop-suey Chinese",
           "ShipAddress":"Hauptstr. 31",
           "ShipCity":"Bern",
           "ShipRegion":null,
           "ShipCountry":"Switzerland",
           "Verified": true
        },
        {
           "OrderID":10255,
           "CustomerID":"RICSU",
           "OrderDate":"1996-07-12T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":148.33,
           "ShipName":"Richter Supermarkt",
           "ShipAddress":"Starenweg 5",
           "ShipCity":"Genève",
           "ShipRegion":null,
           "ShipCountry":"Switzerland"
        },
        {
           "OrderID":10256,
           "CustomerID":"WELLI",
           "OrderDate":"1996-07-15T00:00:00.000Z",
           "ShippedDate":"1996-07-17T00:00:00.000Z",
           "Freight":13.97,
           "ShipName":"Wellington Importadora",
           "ShipAddress":"Rua do Mercado, 12",
           "ShipCity":"Resende",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10257,
           "CustomerID":"HILAA",
           "OrderDate":"1996-07-16T00:00:00.000Z",
           "ShippedDate":"1996-07-22T00:00:00.000Z",
           "Freight":81.91,
           "ShipName":"HILARION-Abastos",
           "ShipAddress":"Carrera 22 con Ave. Carlos Soublette #8-35",
           "ShipCity":"San Cristóbal",
           "ShipRegion":"Táchira",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10258,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-17T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":140.51,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10259,
           "CustomerID":"CENTC",
           "OrderDate":"1996-07-18T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":3.25,
           "ShipName":"Centro comercial Moctezuma",
           "ShipAddress":"Sierras de Granada 9993",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico",
           "Verified": true
        },
        {
           "OrderID":10260,
           "CustomerID":"OTTIK",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-29T00:00:00.000Z",
           "Freight":55.09,
           "ShipName":"Ottilies Käseladen",
           "ShipAddress":"Mehrheimerstr. 369",
           "ShipCity":"Köln",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10261,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-30T00:00:00.000Z",
           "Freight":3.05,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10262,
           "CustomerID":"RATTC",
           "OrderDate":"1996-07-22T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":48.29,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA",
           "Verified": true
        },
        {
           "OrderID":10263,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-23T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":146.06,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "Verified": true,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10264,
           "CustomerID":"FOLKO",
           "OrderDate":"1996-07-24T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":3.67,
           "ShipName":"Folk och fä HB",
           "ShipAddress":"Åkergatan 24",
           "ShipCity":"Bräcke",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10265,
           "CustomerID":"BLONP",
           "OrderDate":"1996-07-25T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":55.28,
           "ShipName":"Blondel père et fils",
           "ShipAddress":"24, place Kléber",
           "ShipCity":"Strasbourg",
           "ShipRegion":null,
           "ShipCountry":"France"
        },
        {
           "OrderID":10266,
           "CustomerID":"WARTH",
           "OrderDate":"1996-07-26T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":25.73,
           "ShipName":"Wartian Herkku",
           "ShipAddress":"Torikatu 38",
           "ShipCity":"Oulu",
           "ShipRegion":null,
           "ShipCountry":"Finland"
        },
        {
           "OrderID":10267,
           "CustomerID":"FRANK",
           "OrderDate":"1996-07-29T00:00:00.000Z",
           "ShippedDate":"1996-08-06T00:00:00.000Z",
           "Freight":208.58,
           "ShipName":"Frankenversand",
           "ShipAddress":"Berliner Platz 43",
           "ShipCity":"München",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10268,
           "CustomerID":"GROSR",
           "OrderDate":"1996-07-30T00:00:00.000Z",
           "ShippedDate":"1996-08-02T00:00:00.000Z",
           "Freight":66.29,
           "ShipName":"GROSELLA-Restaurante",
           "ShipAddress":"5ª Ave. Los Palos Grandes",
           "ShipCity":"Caracas",
           "ShipRegion":"DF",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10269,
           "CustomerID":"WHITC",
           "OrderDate":"1996-07-31T00:00:00.000Z",
           "ShippedDate":"1996-08-09T00:00:00.000Z",
           "Freight":4.56,
           "ShipName":"White Clover Markets",
           "ShipAddress":"1029 - 12th Ave. S.",
           "ShipCity":"Seattle",
           "ShipRegion":"WA",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10270,
           "CustomerID":"WARTH",
           "OrderDate":"1996-08-01T00:00:00.000Z",
           "ShippedDate":"1996-08-02T00:00:00.000Z",
           "Freight":136.54,
           "ShipName":"Wartian Herkku",
           "ShipAddress":"Torikatu 38",
           "ShipCity":"Oulu",
           "ShipRegion":null,
           "ShipCountry":"Finland"
        },
        {
           "OrderID":10271,
           "CustomerID":"SPLIR",
           "OrderDate":"1996-08-01T00:00:00.000Z",
           "ShippedDate":"1996-08-30T00:00:00.000Z",
           "Freight":4.54,
           "ShipName":"Split Rail Beer & Ale",
           "ShipAddress":"P.O. Box 555",
           "ShipCity":"Lander",
           "ShipRegion":"WY",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10272,
           "CustomerID":"RATTC",
           "OrderDate":"1996-08-02T00:00:00.000Z",
           "ShippedDate":"1996-08-06T00:00:00.000Z",
           "Freight":98.03,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10273,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-05T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":76.07,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10274,
           "CustomerID":"VINET",
           "OrderDate":"1996-08-06T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":6.01,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France"
        },
        {
           "OrderID":10275,
           "CustomerID":"MAGAA",
           "OrderDate":"1996-08-07T00:00:00.000Z",
           "ShippedDate":"1996-08-09T00:00:00.000Z",
           "Freight":26.93,
           "ShipName":"Magazzini Alimentari Riuniti",
           "ShipAddress":"Via Ludovico il Moro 22",
           "ShipCity":"Bergamo",
           "ShipRegion":null,
           "ShipCountry":"Italy"
        },
        {
           "OrderID":10276,
           "CustomerID":"TORTU",
           "OrderDate":"1996-08-08T00:00:00.000Z",
           "ShippedDate":"1996-08-14T00:00:00.000Z",
           "Freight":13.84,
           "ShipName":"Tortuga Restaurante",
           "ShipAddress":"Avda. Azteca 123",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico"
        },
        {
           "OrderID":10277,
           "CustomerID":"MORGK",
           "OrderDate":"1996-08-09T00:00:00.000Z",
           "ShippedDate":"1996-08-13T00:00:00.000Z",
           "Freight":125.77,
           "ShipName":"Morgenstern Gesundkost",
           "ShipAddress":"Heerstr. 22",
           "ShipCity":"Leipzig",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10278,
           "CustomerID":"BERGS",
           "OrderDate":"1996-08-12T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":92.69,
           "ShipName":"Berglunds snabbköp",
           "ShipAddress":"Berguvsvägen  8",
           "ShipCity":"Luleå",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10279,
           "CustomerID":"LEHMS",
           "OrderDate":"1996-08-13T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":25.83,
           "ShipName":"Lehmanns Marktstand",
           "ShipAddress":"Magazinweg 7",
           "ShipCity":"Frankfurt a.M.",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10280,
           "CustomerID":"BERGS",
           "OrderDate":"1996-08-14T00:00:00.000Z",
           "ShippedDate":"1996-09-12T00:00:00.000Z",
           "Freight":8.98,
           "ShipName":"Berglunds snabbköp",
           "ShipAddress":"Berguvsvägen  8",
           "ShipCity":"Luleå",
           "ShipRegion":null,
           "ShipCountry":"Sweden",
           "Verified": true
        },
        {
           "OrderID":10281,
           "CustomerID":"ROMEY",
           "OrderDate":"1996-08-14T00:00:00.000Z",
           "ShippedDate":"1996-08-21T00:00:00.000Z",
           "Freight":2.94,
           "ShipName":"Romero y tomillo",
           "ShipAddress":"Gran Vía, 1",
           "ShipCity":"Madrid",
           "ShipRegion":null,
           "ShipCountry":"Spain"
        },
        {
           "OrderID":10282,
           "CustomerID":"ROMEY",
           "OrderDate":"1996-08-15T00:00:00.000Z",
           "ShippedDate":"1996-08-21T00:00:00.000Z",
           "Freight":12.69,
           "ShipName":"Romero y tomillo",
           "ShipAddress":"Gran Vía, 1",
           "ShipCity":"Madrid",
           "ShipRegion":null,
           "ShipCountry":"Spain"
        },
        {
           "OrderID":10283,
           "CustomerID":"LILAS",
           "OrderDate":"1996-08-16T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":84.81,
           "ShipName":"LILA-Supermercado",
           "ShipAddress":"Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
           "ShipCity":"Barquisimeto",
           "ShipRegion":"Lara",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10284,
           "CustomerID":"LEHMS",
           "OrderDate":"1996-08-19T00:00:00.000Z",
           "ShippedDate":"1996-08-27T00:00:00.000Z",
           "Freight":76.56,
           "ShipName":"Lehmanns Marktstand",
           "ShipAddress":"Magazinweg 7",
           "ShipCity":"Frankfurt a.M.",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10285,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-20T00:00:00.000Z",
           "ShippedDate":"1996-08-26T00:00:00.000Z",
           "Freight":76.83,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10286,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-21T00:00:00.000Z",
           "ShippedDate":"1996-08-30T00:00:00.000Z",
           "Freight":229.24,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10287,
           "CustomerID":"RICAR",
           "OrderDate":"1996-08-22T00:00:00.000Z",
           "ShippedDate":"1996-08-28T00:00:00.000Z",
           "Freight":12.76,
           "ShipName":"Ricardo Adocicados",
           "ShipAddress":"Av. Copacabana, 267",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10288,
           "CustomerID":"REGGC",
           "OrderDate":"1996-08-23T00:00:00.000Z",
           "ShippedDate":"1996-09-03T00:00:00.000Z",
           "Freight":7.45,
           "ShipName":"Reggiani Caseifici",
           "ShipAddress":"Strada Provinciale 124",
           "ShipCity":"Reggio Emilia",
           "ShipRegion":null,
           "ShipCountry":"Italy"
        },
        {
           "OrderID":10289,
           "CustomerID":"BSBEV",
           "OrderDate":"1996-08-26T00:00:00.000Z",
           "ShippedDate":"1996-08-28T00:00:00.000Z",
           "Freight":22.77,
           "ShipName":"B's Beverages",
           "ShipAddress":"Fauntleroy Circus",
           "ShipCity":"London",
           "ShipRegion":null,
           "ShipCountry":"UK"
        },
        {
           "OrderID":10290,
           "CustomerID":"COMMI",
           "OrderDate":"1996-08-27T00:00:00.000Z",
           "ShippedDate":"1996-09-03T00:00:00.000Z",
           "Freight":79.7,
           "ShipName":"Comércio Mineiro",
           "ShipAddress":"Av. dos Lusíadas, 23",
           "ShipCity":"Sao Paulo",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10291,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-08-27T00:00:00.000Z",
           "ShippedDate":"1996-09-04T00:00:00.000Z",
           "Freight":6.4,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10292,
           "CustomerID":"TRADH",
           "OrderDate":"1996-08-28T00:00:00.000Z",
           "ShippedDate":"1996-09-02T00:00:00.000Z",
           "Freight":1.35,
           "ShipName":"Tradiçao Hipermercados",
           "ShipAddress":"Av. Inês de Castro, 414",
           "ShipCity":"Sao Paulo",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10293,
           "CustomerID":"TORTU",
           "OrderDate":"1996-08-29T00:00:00.000Z",
           "ShippedDate":"1996-09-11T00:00:00.000Z",
           "Freight":21.18,
           "ShipName":"Tortuga Restaurante",
           "ShipAddress":"Avda. Azteca 123",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico"
        },
        {
           "OrderID":10294,
           "CustomerID":"RATTC",
           "OrderDate":"1996-08-30T00:00:00.000Z",
           "ShippedDate":"1996-09-05T00:00:00.000Z",
           "Freight":147.26,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA"
        }];
});

Enable Grouping

The grouping feature enables users to view the Grid record in a grouped view. It can be enabled by setting allowGrouping property to true. Also, need to inject the Group module in the provide section as follow. If we didn’t inject the Group module, then the group drop area will not be rendered in Grid. Grouping feature can be customized using groupSettings property.

Source

Preview

app.vue

datasource.js

<template>
<div id="app">
    <ejs-grid :dataSource="data" :allowPaging="true" :allowSorting='true' :allowFiltering='true' :allowGrouping='true' :pageSettings='pageSettings'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
      </e-columns>
    </ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Sort, Filter, Group } from "@syncfusion/ej2-vue-grids";

Vue.use(GridPlugin);

export default {
  data() {
return {
  data: [
      { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
      { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 },
      { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83 },
      { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34 },
      { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3 },
      { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17 },
      { OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98 },
      { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33 },
      { OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97 }
  ],
  pageSettings: { pageSize: 5 }
};
  },
  provide: {
grid: [Page, Sort, Filter, Group]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>


{% endraw %}

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.data = [
        {
           "OrderID":10248,
           "CustomerID":"VINET",
           "OrderDate":"1996-07-04T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":32.38,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10249,
           "CustomerID":"TOMSP",
           "OrderDate":"1996-07-05T00:00:00.000Z",
           "ShippedDate":"1996-07-10T00:00:00.000Z",
           "Freight":11.61,
           "ShipName":"Toms Spezialitäten",
           "ShipAddress":"Luisenstr. 48",
           "ShipCity":"Münster",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10250,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-12T00:00:00.000Z",
           "Freight":65.83,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10251,
           "CustomerID":"VICTE",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":41.34,
           "ShipName":"Victuailles en stock",
           "ShipAddress":"2, rue du Commerce",
           "ShipCity":"Lyon",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10252,
           "CustomerID":"SUPRD",
           "OrderDate":"1996-07-09T00:00:00.000Z",
           "ShippedDate":"1996-07-11T00:00:00.000Z",
           "Freight":51.3,
           "ShipName":"Suprêmes délices",
           "ShipAddress":"Boulevard Tirou, 255",
           "ShipCity":"Charleroi",
           "ShipRegion":null,
           "ShipCountry":"Belgium"
        },
        {
           "OrderID":10253,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-10T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":58.17,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10254,
           "CustomerID":"CHOPS",
           "OrderDate":"1996-07-11T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":22.98,
           "ShipName":"Chop-suey Chinese",
           "ShipAddress":"Hauptstr. 31",
           "ShipCity":"Bern",
           "ShipRegion":null,
           "ShipCountry":"Switzerland",
           "Verified": true
        },
        {
           "OrderID":10255,
           "CustomerID":"RICSU",
           "OrderDate":"1996-07-12T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":148.33,
           "ShipName":"Richter Supermarkt",
           "ShipAddress":"Starenweg 5",
           "ShipCity":"Genève",
           "ShipRegion":null,
           "ShipCountry":"Switzerland"
        },
        {
           "OrderID":10256,
           "CustomerID":"WELLI",
           "OrderDate":"1996-07-15T00:00:00.000Z",
           "ShippedDate":"1996-07-17T00:00:00.000Z",
           "Freight":13.97,
           "ShipName":"Wellington Importadora",
           "ShipAddress":"Rua do Mercado, 12",
           "ShipCity":"Resende",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10257,
           "CustomerID":"HILAA",
           "OrderDate":"1996-07-16T00:00:00.000Z",
           "ShippedDate":"1996-07-22T00:00:00.000Z",
           "Freight":81.91,
           "ShipName":"HILARION-Abastos",
           "ShipAddress":"Carrera 22 con Ave. Carlos Soublette #8-35",
           "ShipCity":"San Cristóbal",
           "ShipRegion":"Táchira",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10258,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-17T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":140.51,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10259,
           "CustomerID":"CENTC",
           "OrderDate":"1996-07-18T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":3.25,
           "ShipName":"Centro comercial Moctezuma",
           "ShipAddress":"Sierras de Granada 9993",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico",
           "Verified": true
        },
        {
           "OrderID":10260,
           "CustomerID":"OTTIK",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-29T00:00:00.000Z",
           "Freight":55.09,
           "ShipName":"Ottilies Käseladen",
           "ShipAddress":"Mehrheimerstr. 369",
           "ShipCity":"Köln",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10261,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-30T00:00:00.000Z",
           "Freight":3.05,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10262,
           "CustomerID":"RATTC",
           "OrderDate":"1996-07-22T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":48.29,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA",
           "Verified": true
        },
        {
           "OrderID":10263,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-23T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":146.06,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "Verified": true,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10264,
           "CustomerID":"FOLKO",
           "OrderDate":"1996-07-24T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":3.67,
           "ShipName":"Folk och fä HB",
           "ShipAddress":"Åkergatan 24",
           "ShipCity":"Bräcke",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10265,
           "CustomerID":"BLONP",
           "OrderDate":"1996-07-25T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":55.28,
           "ShipName":"Blondel père et fils",
           "ShipAddress":"24, place Kléber",
           "ShipCity":"Strasbourg",
           "ShipRegion":null,
           "ShipCountry":"France"
        },
        {
           "OrderID":10266,
           "CustomerID":"WARTH",
           "OrderDate":"1996-07-26T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":25.73,
           "ShipName":"Wartian Herkku",
           "ShipAddress":"Torikatu 38",
           "ShipCity":"Oulu",
           "ShipRegion":null,
           "ShipCountry":"Finland"
        },
        {
           "OrderID":10267,
           "CustomerID":"FRANK",
           "OrderDate":"1996-07-29T00:00:00.000Z",
           "ShippedDate":"1996-08-06T00:00:00.000Z",
           "Freight":208.58,
           "ShipName":"Frankenversand",
           "ShipAddress":"Berliner Platz 43",
           "ShipCity":"München",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10268,
           "CustomerID":"GROSR",
           "OrderDate":"1996-07-30T00:00:00.000Z",
           "ShippedDate":"1996-08-02T00:00:00.000Z",
           "Freight":66.29,
           "ShipName":"GROSELLA-Restaurante",
           "ShipAddress":"5ª Ave. Los Palos Grandes",
           "ShipCity":"Caracas",
           "ShipRegion":"DF",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10269,
           "CustomerID":"WHITC",
           "OrderDate":"1996-07-31T00:00:00.000Z",
           "ShippedDate":"1996-08-09T00:00:00.000Z",
           "Freight":4.56,
           "ShipName":"White Clover Markets",
           "ShipAddress":"1029 - 12th Ave. S.",
           "ShipCity":"Seattle",
           "ShipRegion":"WA",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10270,
           "CustomerID":"WARTH",
           "OrderDate":"1996-08-01T00:00:00.000Z",
           "ShippedDate":"1996-08-02T00:00:00.000Z",
           "Freight":136.54,
           "ShipName":"Wartian Herkku",
           "ShipAddress":"Torikatu 38",
           "ShipCity":"Oulu",
           "ShipRegion":null,
           "ShipCountry":"Finland"
        },
        {
           "OrderID":10271,
           "CustomerID":"SPLIR",
           "OrderDate":"1996-08-01T00:00:00.000Z",
           "ShippedDate":"1996-08-30T00:00:00.000Z",
           "Freight":4.54,
           "ShipName":"Split Rail Beer & Ale",
           "ShipAddress":"P.O. Box 555",
           "ShipCity":"Lander",
           "ShipRegion":"WY",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10272,
           "CustomerID":"RATTC",
           "OrderDate":"1996-08-02T00:00:00.000Z",
           "ShippedDate":"1996-08-06T00:00:00.000Z",
           "Freight":98.03,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10273,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-05T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":76.07,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10274,
           "CustomerID":"VINET",
           "OrderDate":"1996-08-06T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":6.01,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France"
        },
        {
           "OrderID":10275,
           "CustomerID":"MAGAA",
           "OrderDate":"1996-08-07T00:00:00.000Z",
           "ShippedDate":"1996-08-09T00:00:00.000Z",
           "Freight":26.93,
           "ShipName":"Magazzini Alimentari Riuniti",
           "ShipAddress":"Via Ludovico il Moro 22",
           "ShipCity":"Bergamo",
           "ShipRegion":null,
           "ShipCountry":"Italy"
        },
        {
           "OrderID":10276,
           "CustomerID":"TORTU",
           "OrderDate":"1996-08-08T00:00:00.000Z",
           "ShippedDate":"1996-08-14T00:00:00.000Z",
           "Freight":13.84,
           "ShipName":"Tortuga Restaurante",
           "ShipAddress":"Avda. Azteca 123",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico"
        },
        {
           "OrderID":10277,
           "CustomerID":"MORGK",
           "OrderDate":"1996-08-09T00:00:00.000Z",
           "ShippedDate":"1996-08-13T00:00:00.000Z",
           "Freight":125.77,
           "ShipName":"Morgenstern Gesundkost",
           "ShipAddress":"Heerstr. 22",
           "ShipCity":"Leipzig",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10278,
           "CustomerID":"BERGS",
           "OrderDate":"1996-08-12T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":92.69,
           "ShipName":"Berglunds snabbköp",
           "ShipAddress":"Berguvsvägen  8",
           "ShipCity":"Luleå",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10279,
           "CustomerID":"LEHMS",
           "OrderDate":"1996-08-13T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":25.83,
           "ShipName":"Lehmanns Marktstand",
           "ShipAddress":"Magazinweg 7",
           "ShipCity":"Frankfurt a.M.",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10280,
           "CustomerID":"BERGS",
           "OrderDate":"1996-08-14T00:00:00.000Z",
           "ShippedDate":"1996-09-12T00:00:00.000Z",
           "Freight":8.98,
           "ShipName":"Berglunds snabbköp",
           "ShipAddress":"Berguvsvägen  8",
           "ShipCity":"Luleå",
           "ShipRegion":null,
           "ShipCountry":"Sweden",
           "Verified": true
        },
        {
           "OrderID":10281,
           "CustomerID":"ROMEY",
           "OrderDate":"1996-08-14T00:00:00.000Z",
           "ShippedDate":"1996-08-21T00:00:00.000Z",
           "Freight":2.94,
           "ShipName":"Romero y tomillo",
           "ShipAddress":"Gran Vía, 1",
           "ShipCity":"Madrid",
           "ShipRegion":null,
           "ShipCountry":"Spain"
        },
        {
           "OrderID":10282,
           "CustomerID":"ROMEY",
           "OrderDate":"1996-08-15T00:00:00.000Z",
           "ShippedDate":"1996-08-21T00:00:00.000Z",
           "Freight":12.69,
           "ShipName":"Romero y tomillo",
           "ShipAddress":"Gran Vía, 1",
           "ShipCity":"Madrid",
           "ShipRegion":null,
           "ShipCountry":"Spain"
        },
        {
           "OrderID":10283,
           "CustomerID":"LILAS",
           "OrderDate":"1996-08-16T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":84.81,
           "ShipName":"LILA-Supermercado",
           "ShipAddress":"Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
           "ShipCity":"Barquisimeto",
           "ShipRegion":"Lara",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10284,
           "CustomerID":"LEHMS",
           "OrderDate":"1996-08-19T00:00:00.000Z",
           "ShippedDate":"1996-08-27T00:00:00.000Z",
           "Freight":76.56,
           "ShipName":"Lehmanns Marktstand",
           "ShipAddress":"Magazinweg 7",
           "ShipCity":"Frankfurt a.M.",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10285,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-20T00:00:00.000Z",
           "ShippedDate":"1996-08-26T00:00:00.000Z",
           "Freight":76.83,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10286,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-21T00:00:00.000Z",
           "ShippedDate":"1996-08-30T00:00:00.000Z",
           "Freight":229.24,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10287,
           "CustomerID":"RICAR",
           "OrderDate":"1996-08-22T00:00:00.000Z",
           "ShippedDate":"1996-08-28T00:00:00.000Z",
           "Freight":12.76,
           "ShipName":"Ricardo Adocicados",
           "ShipAddress":"Av. Copacabana, 267",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10288,
           "CustomerID":"REGGC",
           "OrderDate":"1996-08-23T00:00:00.000Z",
           "ShippedDate":"1996-09-03T00:00:00.000Z",
           "Freight":7.45,
           "ShipName":"Reggiani Caseifici",
           "ShipAddress":"Strada Provinciale 124",
           "ShipCity":"Reggio Emilia",
           "ShipRegion":null,
           "ShipCountry":"Italy"
        },
        {
           "OrderID":10289,
           "CustomerID":"BSBEV",
           "OrderDate":"1996-08-26T00:00:00.000Z",
           "ShippedDate":"1996-08-28T00:00:00.000Z",
           "Freight":22.77,
           "ShipName":"B's Beverages",
           "ShipAddress":"Fauntleroy Circus",
           "ShipCity":"London",
           "ShipRegion":null,
           "ShipCountry":"UK"
        },
        {
           "OrderID":10290,
           "CustomerID":"COMMI",
           "OrderDate":"1996-08-27T00:00:00.000Z",
           "ShippedDate":"1996-09-03T00:00:00.000Z",
           "Freight":79.7,
           "ShipName":"Comércio Mineiro",
           "ShipAddress":"Av. dos Lusíadas, 23",
           "ShipCity":"Sao Paulo",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10291,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-08-27T00:00:00.000Z",
           "ShippedDate":"1996-09-04T00:00:00.000Z",
           "Freight":6.4,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10292,
           "CustomerID":"TRADH",
           "OrderDate":"1996-08-28T00:00:00.000Z",
           "ShippedDate":"1996-09-02T00:00:00.000Z",
           "Freight":1.35,
           "ShipName":"Tradiçao Hipermercados",
           "ShipAddress":"Av. Inês de Castro, 414",
           "ShipCity":"Sao Paulo",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10293,
           "CustomerID":"TORTU",
           "OrderDate":"1996-08-29T00:00:00.000Z",
           "ShippedDate":"1996-09-11T00:00:00.000Z",
           "Freight":21.18,
           "ShipName":"Tortuga Restaurante",
           "ShipAddress":"Avda. Azteca 123",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico"
        },
        {
           "OrderID":10294,
           "CustomerID":"RATTC",
           "OrderDate":"1996-08-30T00:00:00.000Z",
           "ShippedDate":"1996-09-05T00:00:00.000Z",
           "Freight":147.26,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA"
        }];
});

Enable Aggregate

The Aggregate feature enables users to view the aggregates of Grid records. It can be enabled by configured through e-aggregates directive. The field and type are the minimum properties required to represent an aggregate column. Also, need to inject the Aggregate module in the provide section as follow. If we didn’t inject the Aggregate module, then the footer table will not be rendered in Grid. Check aggregate to know more about its configuration.

Source

Preview

app.vue

datasource.js

<template>
<div id="app">
    <ejs-grid :dataSource="data" :allowPaging="true" :allowSorting='true' :allowFiltering='true' :allowGrouping='true' :pageSettings='pageSettings' >
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
      </e-columns>
      <e-aggregates>
        <e-aggregate>
            <e-columns>
                <e-column type="Sum" field="Freight" format="C2" :footerTemplate='footerSum'></e-column>
            </e-columns>
        </e-aggregate>
      </e-aggregates>
    </ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Sort, Filter, Group, Aggregate } from "@syncfusion/ej2-vue-grids";

Vue.use(GridPlugin);

export default {
  data() {
return {
  data: [
      { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
      { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 },
      { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83 },
      { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34 },
      { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3 },
      { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17 },
      { OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98 },
      { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33 },
      { OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97 }
  ],
  pageSettings: { pageSize: 5 },
  footerSum: function () {
    return  { template : Vue.component('sumTemplate', {
        template: `<span>Sum: {{data.Sum}}</span>`,
        data () {return { data: {data: {}}};}
        })
      }
  }
};
  },
  provide: {
grid: [Page, Sort, Filter, Group, Aggregate]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>


{% endraw %}

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.data = [
        {
           "OrderID":10248,
           "CustomerID":"VINET",
           "OrderDate":"1996-07-04T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":32.38,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10249,
           "CustomerID":"TOMSP",
           "OrderDate":"1996-07-05T00:00:00.000Z",
           "ShippedDate":"1996-07-10T00:00:00.000Z",
           "Freight":11.61,
           "ShipName":"Toms Spezialitäten",
           "ShipAddress":"Luisenstr. 48",
           "ShipCity":"Münster",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10250,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-12T00:00:00.000Z",
           "Freight":65.83,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10251,
           "CustomerID":"VICTE",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":41.34,
           "ShipName":"Victuailles en stock",
           "ShipAddress":"2, rue du Commerce",
           "ShipCity":"Lyon",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10252,
           "CustomerID":"SUPRD",
           "OrderDate":"1996-07-09T00:00:00.000Z",
           "ShippedDate":"1996-07-11T00:00:00.000Z",
           "Freight":51.3,
           "ShipName":"Suprêmes délices",
           "ShipAddress":"Boulevard Tirou, 255",
           "ShipCity":"Charleroi",
           "ShipRegion":null,
           "ShipCountry":"Belgium"
        },
        {
           "OrderID":10253,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-10T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":58.17,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10254,
           "CustomerID":"CHOPS",
           "OrderDate":"1996-07-11T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":22.98,
           "ShipName":"Chop-suey Chinese",
           "ShipAddress":"Hauptstr. 31",
           "ShipCity":"Bern",
           "ShipRegion":null,
           "ShipCountry":"Switzerland",
           "Verified": true
        },
        {
           "OrderID":10255,
           "CustomerID":"RICSU",
           "OrderDate":"1996-07-12T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":148.33,
           "ShipName":"Richter Supermarkt",
           "ShipAddress":"Starenweg 5",
           "ShipCity":"Genève",
           "ShipRegion":null,
           "ShipCountry":"Switzerland"
        },
        {
           "OrderID":10256,
           "CustomerID":"WELLI",
           "OrderDate":"1996-07-15T00:00:00.000Z",
           "ShippedDate":"1996-07-17T00:00:00.000Z",
           "Freight":13.97,
           "ShipName":"Wellington Importadora",
           "ShipAddress":"Rua do Mercado, 12",
           "ShipCity":"Resende",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10257,
           "CustomerID":"HILAA",
           "OrderDate":"1996-07-16T00:00:00.000Z",
           "ShippedDate":"1996-07-22T00:00:00.000Z",
           "Freight":81.91,
           "ShipName":"HILARION-Abastos",
           "ShipAddress":"Carrera 22 con Ave. Carlos Soublette #8-35",
           "ShipCity":"San Cristóbal",
           "ShipRegion":"Táchira",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10258,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-17T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":140.51,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10259,
           "CustomerID":"CENTC",
           "OrderDate":"1996-07-18T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":3.25,
           "ShipName":"Centro comercial Moctezuma",
           "ShipAddress":"Sierras de Granada 9993",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico",
           "Verified": true
        },
        {
           "OrderID":10260,
           "CustomerID":"OTTIK",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-29T00:00:00.000Z",
           "Freight":55.09,
           "ShipName":"Ottilies Käseladen",
           "ShipAddress":"Mehrheimerstr. 369",
           "ShipCity":"Köln",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10261,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-30T00:00:00.000Z",
           "Freight":3.05,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10262,
           "CustomerID":"RATTC",
           "OrderDate":"1996-07-22T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":48.29,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA",
           "Verified": true
        },
        {
           "OrderID":10263,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-23T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":146.06,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "Verified": true,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10264,
           "CustomerID":"FOLKO",
           "OrderDate":"1996-07-24T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":3.67,
           "ShipName":"Folk och fä HB",
           "ShipAddress":"Åkergatan 24",
           "ShipCity":"Bräcke",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10265,
           "CustomerID":"BLONP",
           "OrderDate":"1996-07-25T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":55.28,
           "ShipName":"Blondel père et fils",
           "ShipAddress":"24, place Kléber",
           "ShipCity":"Strasbourg",
           "ShipRegion":null,
           "ShipCountry":"France"
        },
        {
           "OrderID":10266,
           "CustomerID":"WARTH",
           "OrderDate":"1996-07-26T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":25.73,
           "ShipName":"Wartian Herkku",
           "ShipAddress":"Torikatu 38",
           "ShipCity":"Oulu",
           "ShipRegion":null,
           "ShipCountry":"Finland"
        },
        {
           "OrderID":10267,
           "CustomerID":"FRANK",
           "OrderDate":"1996-07-29T00:00:00.000Z",
           "ShippedDate":"1996-08-06T00:00:00.000Z",
           "Freight":208.58,
           "ShipName":"Frankenversand",
           "ShipAddress":"Berliner Platz 43",
           "ShipCity":"München",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10268,
           "CustomerID":"GROSR",
           "OrderDate":"1996-07-30T00:00:00.000Z",
           "ShippedDate":"1996-08-02T00:00:00.000Z",
           "Freight":66.29,
           "ShipName":"GROSELLA-Restaurante",
           "ShipAddress":"5ª Ave. Los Palos Grandes",
           "ShipCity":"Caracas",
           "ShipRegion":"DF",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10269,
           "CustomerID":"WHITC",
           "OrderDate":"1996-07-31T00:00:00.000Z",
           "ShippedDate":"1996-08-09T00:00:00.000Z",
           "Freight":4.56,
           "ShipName":"White Clover Markets",
           "ShipAddress":"1029 - 12th Ave. S.",
           "ShipCity":"Seattle",
           "ShipRegion":"WA",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10270,
           "CustomerID":"WARTH",
           "OrderDate":"1996-08-01T00:00:00.000Z",
           "ShippedDate":"1996-08-02T00:00:00.000Z",
           "Freight":136.54,
           "ShipName":"Wartian Herkku",
           "ShipAddress":"Torikatu 38",
           "ShipCity":"Oulu",
           "ShipRegion":null,
           "ShipCountry":"Finland"
        },
        {
           "OrderID":10271,
           "CustomerID":"SPLIR",
           "OrderDate":"1996-08-01T00:00:00.000Z",
           "ShippedDate":"1996-08-30T00:00:00.000Z",
           "Freight":4.54,
           "ShipName":"Split Rail Beer & Ale",
           "ShipAddress":"P.O. Box 555",
           "ShipCity":"Lander",
           "ShipRegion":"WY",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10272,
           "CustomerID":"RATTC",
           "OrderDate":"1996-08-02T00:00:00.000Z",
           "ShippedDate":"1996-08-06T00:00:00.000Z",
           "Freight":98.03,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10273,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-05T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":76.07,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10274,
           "CustomerID":"VINET",
           "OrderDate":"1996-08-06T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":6.01,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France"
        },
        {
           "OrderID":10275,
           "CustomerID":"MAGAA",
           "OrderDate":"1996-08-07T00:00:00.000Z",
           "ShippedDate":"1996-08-09T00:00:00.000Z",
           "Freight":26.93,
           "ShipName":"Magazzini Alimentari Riuniti",
           "ShipAddress":"Via Ludovico il Moro 22",
           "ShipCity":"Bergamo",
           "ShipRegion":null,
           "ShipCountry":"Italy"
        },
        {
           "OrderID":10276,
           "CustomerID":"TORTU",
           "OrderDate":"1996-08-08T00:00:00.000Z",
           "ShippedDate":"1996-08-14T00:00:00.000Z",
           "Freight":13.84,
           "ShipName":"Tortuga Restaurante",
           "ShipAddress":"Avda. Azteca 123",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico"
        },
        {
           "OrderID":10277,
           "CustomerID":"MORGK",
           "OrderDate":"1996-08-09T00:00:00.000Z",
           "ShippedDate":"1996-08-13T00:00:00.000Z",
           "Freight":125.77,
           "ShipName":"Morgenstern Gesundkost",
           "ShipAddress":"Heerstr. 22",
           "ShipCity":"Leipzig",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10278,
           "CustomerID":"BERGS",
           "OrderDate":"1996-08-12T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":92.69,
           "ShipName":"Berglunds snabbköp",
           "ShipAddress":"Berguvsvägen  8",
           "ShipCity":"Luleå",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10279,
           "CustomerID":"LEHMS",
           "OrderDate":"1996-08-13T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":25.83,
           "ShipName":"Lehmanns Marktstand",
           "ShipAddress":"Magazinweg 7",
           "ShipCity":"Frankfurt a.M.",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10280,
           "CustomerID":"BERGS",
           "OrderDate":"1996-08-14T00:00:00.000Z",
           "ShippedDate":"1996-09-12T00:00:00.000Z",
           "Freight":8.98,
           "ShipName":"Berglunds snabbköp",
           "ShipAddress":"Berguvsvägen  8",
           "ShipCity":"Luleå",
           "ShipRegion":null,
           "ShipCountry":"Sweden",
           "Verified": true
        },
        {
           "OrderID":10281,
           "CustomerID":"ROMEY",
           "OrderDate":"1996-08-14T00:00:00.000Z",
           "ShippedDate":"1996-08-21T00:00:00.000Z",
           "Freight":2.94,
           "ShipName":"Romero y tomillo",
           "ShipAddress":"Gran Vía, 1",
           "ShipCity":"Madrid",
           "ShipRegion":null,
           "ShipCountry":"Spain"
        },
        {
           "OrderID":10282,
           "CustomerID":"ROMEY",
           "OrderDate":"1996-08-15T00:00:00.000Z",
           "ShippedDate":"1996-08-21T00:00:00.000Z",
           "Freight":12.69,
           "ShipName":"Romero y tomillo",
           "ShipAddress":"Gran Vía, 1",
           "ShipCity":"Madrid",
           "ShipRegion":null,
           "ShipCountry":"Spain"
        },
        {
           "OrderID":10283,
           "CustomerID":"LILAS",
           "OrderDate":"1996-08-16T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":84.81,
           "ShipName":"LILA-Supermercado",
           "ShipAddress":"Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
           "ShipCity":"Barquisimeto",
           "ShipRegion":"Lara",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10284,
           "CustomerID":"LEHMS",
           "OrderDate":"1996-08-19T00:00:00.000Z",
           "ShippedDate":"1996-08-27T00:00:00.000Z",
           "Freight":76.56,
           "ShipName":"Lehmanns Marktstand",
           "ShipAddress":"Magazinweg 7",
           "ShipCity":"Frankfurt a.M.",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10285,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-20T00:00:00.000Z",
           "ShippedDate":"1996-08-26T00:00:00.000Z",
           "Freight":76.83,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10286,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-21T00:00:00.000Z",
           "ShippedDate":"1996-08-30T00:00:00.000Z",
           "Freight":229.24,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10287,
           "CustomerID":"RICAR",
           "OrderDate":"1996-08-22T00:00:00.000Z",
           "ShippedDate":"1996-08-28T00:00:00.000Z",
           "Freight":12.76,
           "ShipName":"Ricardo Adocicados",
           "ShipAddress":"Av. Copacabana, 267",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10288,
           "CustomerID":"REGGC",
           "OrderDate":"1996-08-23T00:00:00.000Z",
           "ShippedDate":"1996-09-03T00:00:00.000Z",
           "Freight":7.45,
           "ShipName":"Reggiani Caseifici",
           "ShipAddress":"Strada Provinciale 124",
           "ShipCity":"Reggio Emilia",
           "ShipRegion":null,
           "ShipCountry":"Italy"
        },
        {
           "OrderID":10289,
           "CustomerID":"BSBEV",
           "OrderDate":"1996-08-26T00:00:00.000Z",
           "ShippedDate":"1996-08-28T00:00:00.000Z",
           "Freight":22.77,
           "ShipName":"B's Beverages",
           "ShipAddress":"Fauntleroy Circus",
           "ShipCity":"London",
           "ShipRegion":null,
           "ShipCountry":"UK"
        },
        {
           "OrderID":10290,
           "CustomerID":"COMMI",
           "OrderDate":"1996-08-27T00:00:00.000Z",
           "ShippedDate":"1996-09-03T00:00:00.000Z",
           "Freight":79.7,
           "ShipName":"Comércio Mineiro",
           "ShipAddress":"Av. dos Lusíadas, 23",
           "ShipCity":"Sao Paulo",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10291,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-08-27T00:00:00.000Z",
           "ShippedDate":"1996-09-04T00:00:00.000Z",
           "Freight":6.4,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10292,
           "CustomerID":"TRADH",
           "OrderDate":"1996-08-28T00:00:00.000Z",
           "ShippedDate":"1996-09-02T00:00:00.000Z",
           "Freight":1.35,
           "ShipName":"Tradiçao Hipermercados",
           "ShipAddress":"Av. Inês de Castro, 414",
           "ShipCity":"Sao Paulo",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10293,
           "CustomerID":"TORTU",
           "OrderDate":"1996-08-29T00:00:00.000Z",
           "ShippedDate":"1996-09-11T00:00:00.000Z",
           "Freight":21.18,
           "ShipName":"Tortuga Restaurante",
           "ShipAddress":"Avda. Azteca 123",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico"
        },
        {
           "OrderID":10294,
           "CustomerID":"RATTC",
           "OrderDate":"1996-08-30T00:00:00.000Z",
           "ShippedDate":"1996-09-05T00:00:00.000Z",
           "Freight":147.26,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA"
        }];
});

Run the application

The Vue Grid application is configured to compile and run the application in a browser. Use the following command to run the application.

npm run dev

Source

Preview

app.vue

datasource.js

<template>
<div id="app">
    <ejs-grid :dataSource="data" :allowPaging="true" :allowSorting='true' :allowFiltering='true' :allowGrouping='true' :pageSettings='pageSettings'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
      </e-columns>
      <e-aggregates>
        <e-aggregate>
            <e-columns>
                <e-column type="Sum" field="Freight" format="C2" :footerTemplate='footerSum'></e-column>
            </e-columns>
        </e-aggregate>
      </e-aggregates>
    </ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Sort, Filter, Group, Aggregate } from "@syncfusion/ej2-vue-grids";

Vue.use(GridPlugin);

export default {
  data() {
return {
  data: [
      { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
      { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 },
      { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83 },
      { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34 },
      { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3 },
      { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17 },
      { OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98 },
      { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33 },
      { OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97 }
  ],
  pageSettings: { pageSize: 5 },
  footerSum: function () {
    return  { template : Vue.component('sumTemplate', {
        template: `<span>Sum: {{data.Sum}}</span>`,
        data () {return { data: {}};}
        })
      }
  }
};
  },
  provide: {
grid: [Page, Sort, Filter, Group, Aggregate]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>


{% endraw %}

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.data = [
        {
           "OrderID":10248,
           "CustomerID":"VINET",
           "OrderDate":"1996-07-04T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":32.38,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10249,
           "CustomerID":"TOMSP",
           "OrderDate":"1996-07-05T00:00:00.000Z",
           "ShippedDate":"1996-07-10T00:00:00.000Z",
           "Freight":11.61,
           "ShipName":"Toms Spezialitäten",
           "ShipAddress":"Luisenstr. 48",
           "ShipCity":"Münster",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10250,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-12T00:00:00.000Z",
           "Freight":65.83,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10251,
           "CustomerID":"VICTE",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":41.34,
           "ShipName":"Victuailles en stock",
           "ShipAddress":"2, rue du Commerce",
           "ShipCity":"Lyon",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10252,
           "CustomerID":"SUPRD",
           "OrderDate":"1996-07-09T00:00:00.000Z",
           "ShippedDate":"1996-07-11T00:00:00.000Z",
           "Freight":51.3,
           "ShipName":"Suprêmes délices",
           "ShipAddress":"Boulevard Tirou, 255",
           "ShipCity":"Charleroi",
           "ShipRegion":null,
           "ShipCountry":"Belgium"
        },
        {
           "OrderID":10253,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-10T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":58.17,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10254,
           "CustomerID":"CHOPS",
           "OrderDate":"1996-07-11T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":22.98,
           "ShipName":"Chop-suey Chinese",
           "ShipAddress":"Hauptstr. 31",
           "ShipCity":"Bern",
           "ShipRegion":null,
           "ShipCountry":"Switzerland",
           "Verified": true
        },
        {
           "OrderID":10255,
           "CustomerID":"RICSU",
           "OrderDate":"1996-07-12T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":148.33,
           "ShipName":"Richter Supermarkt",
           "ShipAddress":"Starenweg 5",
           "ShipCity":"Genève",
           "ShipRegion":null,
           "ShipCountry":"Switzerland"
        },
        {
           "OrderID":10256,
           "CustomerID":"WELLI",
           "OrderDate":"1996-07-15T00:00:00.000Z",
           "ShippedDate":"1996-07-17T00:00:00.000Z",
           "Freight":13.97,
           "ShipName":"Wellington Importadora",
           "ShipAddress":"Rua do Mercado, 12",
           "ShipCity":"Resende",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10257,
           "CustomerID":"HILAA",
           "OrderDate":"1996-07-16T00:00:00.000Z",
           "ShippedDate":"1996-07-22T00:00:00.000Z",
           "Freight":81.91,
           "ShipName":"HILARION-Abastos",
           "ShipAddress":"Carrera 22 con Ave. Carlos Soublette #8-35",
           "ShipCity":"San Cristóbal",
           "ShipRegion":"Táchira",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10258,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-17T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":140.51,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10259,
           "CustomerID":"CENTC",
           "OrderDate":"1996-07-18T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":3.25,
           "ShipName":"Centro comercial Moctezuma",
           "ShipAddress":"Sierras de Granada 9993",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico",
           "Verified": true
        },
        {
           "OrderID":10260,
           "CustomerID":"OTTIK",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-29T00:00:00.000Z",
           "Freight":55.09,
           "ShipName":"Ottilies Käseladen",
           "ShipAddress":"Mehrheimerstr. 369",
           "ShipCity":"Köln",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10261,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-30T00:00:00.000Z",
           "Freight":3.05,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10262,
           "CustomerID":"RATTC",
           "OrderDate":"1996-07-22T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":48.29,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA",
           "Verified": true
        },
        {
           "OrderID":10263,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-23T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":146.06,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "Verified": true,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10264,
           "CustomerID":"FOLKO",
           "OrderDate":"1996-07-24T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":3.67,
           "ShipName":"Folk och fä HB",
           "ShipAddress":"Åkergatan 24",
           "ShipCity":"Bräcke",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10265,
           "CustomerID":"BLONP",
           "OrderDate":"1996-07-25T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":55.28,
           "ShipName":"Blondel père et fils",
           "ShipAddress":"24, place Kléber",
           "ShipCity":"Strasbourg",
           "ShipRegion":null,
           "ShipCountry":"France"
        },
        {
           "OrderID":10266,
           "CustomerID":"WARTH",
           "OrderDate":"1996-07-26T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":25.73,
           "ShipName":"Wartian Herkku",
           "ShipAddress":"Torikatu 38",
           "ShipCity":"Oulu",
           "ShipRegion":null,
           "ShipCountry":"Finland"
        },
        {
           "OrderID":10267,
           "CustomerID":"FRANK",
           "OrderDate":"1996-07-29T00:00:00.000Z",
           "ShippedDate":"1996-08-06T00:00:00.000Z",
           "Freight":208.58,
           "ShipName":"Frankenversand",
           "ShipAddress":"Berliner Platz 43",
           "ShipCity":"München",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10268,
           "CustomerID":"GROSR",
           "OrderDate":"1996-07-30T00:00:00.000Z",
           "ShippedDate":"1996-08-02T00:00:00.000Z",
           "Freight":66.29,
           "ShipName":"GROSELLA-Restaurante",
           "ShipAddress":"5ª Ave. Los Palos Grandes",
           "ShipCity":"Caracas",
           "ShipRegion":"DF",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10269,
           "CustomerID":"WHITC",
           "OrderDate":"1996-07-31T00:00:00.000Z",
           "ShippedDate":"1996-08-09T00:00:00.000Z",
           "Freight":4.56,
           "ShipName":"White Clover Markets",
           "ShipAddress":"1029 - 12th Ave. S.",
           "ShipCity":"Seattle",
           "ShipRegion":"WA",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10270,
           "CustomerID":"WARTH",
           "OrderDate":"1996-08-01T00:00:00.000Z",
           "ShippedDate":"1996-08-02T00:00:00.000Z",
           "Freight":136.54,
           "ShipName":"Wartian Herkku",
           "ShipAddress":"Torikatu 38",
           "ShipCity":"Oulu",
           "ShipRegion":null,
           "ShipCountry":"Finland"
        },
        {
           "OrderID":10271,
           "CustomerID":"SPLIR",
           "OrderDate":"1996-08-01T00:00:00.000Z",
           "ShippedDate":"1996-08-30T00:00:00.000Z",
           "Freight":4.54,
           "ShipName":"Split Rail Beer & Ale",
           "ShipAddress":"P.O. Box 555",
           "ShipCity":"Lander",
           "ShipRegion":"WY",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10272,
           "CustomerID":"RATTC",
           "OrderDate":"1996-08-02T00:00:00.000Z",
           "ShippedDate":"1996-08-06T00:00:00.000Z",
           "Freight":98.03,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10273,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-05T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":76.07,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10274,
           "CustomerID":"VINET",
           "OrderDate":"1996-08-06T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":6.01,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France"
        },
        {
           "OrderID":10275,
           "CustomerID":"MAGAA",
           "OrderDate":"1996-08-07T00:00:00.000Z",
           "ShippedDate":"1996-08-09T00:00:00.000Z",
           "Freight":26.93,
           "ShipName":"Magazzini Alimentari Riuniti",
           "ShipAddress":"Via Ludovico il Moro 22",
           "ShipCity":"Bergamo",
           "ShipRegion":null,
           "ShipCountry":"Italy"
        },
        {
           "OrderID":10276,
           "CustomerID":"TORTU",
           "OrderDate":"1996-08-08T00:00:00.000Z",
           "ShippedDate":"1996-08-14T00:00:00.000Z",
           "Freight":13.84,
           "ShipName":"Tortuga Restaurante",
           "ShipAddress":"Avda. Azteca 123",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico"
        },
        {
           "OrderID":10277,
           "CustomerID":"MORGK",
           "OrderDate":"1996-08-09T00:00:00.000Z",
           "ShippedDate":"1996-08-13T00:00:00.000Z",
           "Freight":125.77,
           "ShipName":"Morgenstern Gesundkost",
           "ShipAddress":"Heerstr. 22",
           "ShipCity":"Leipzig",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10278,
           "CustomerID":"BERGS",
           "OrderDate":"1996-08-12T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":92.69,
           "ShipName":"Berglunds snabbköp",
           "ShipAddress":"Berguvsvägen  8",
           "ShipCity":"Luleå",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10279,
           "CustomerID":"LEHMS",
           "OrderDate":"1996-08-13T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":25.83,
           "ShipName":"Lehmanns Marktstand",
           "ShipAddress":"Magazinweg 7",
           "ShipCity":"Frankfurt a.M.",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10280,
           "CustomerID":"BERGS",
           "OrderDate":"1996-08-14T00:00:00.000Z",
           "ShippedDate":"1996-09-12T00:00:00.000Z",
           "Freight":8.98,
           "ShipName":"Berglunds snabbköp",
           "ShipAddress":"Berguvsvägen  8",
           "ShipCity":"Luleå",
           "ShipRegion":null,
           "ShipCountry":"Sweden",
           "Verified": true
        },
        {
           "OrderID":10281,
           "CustomerID":"ROMEY",
           "OrderDate":"1996-08-14T00:00:00.000Z",
           "ShippedDate":"1996-08-21T00:00:00.000Z",
           "Freight":2.94,
           "ShipName":"Romero y tomillo",
           "ShipAddress":"Gran Vía, 1",
           "ShipCity":"Madrid",
           "ShipRegion":null,
           "ShipCountry":"Spain"
        },
        {
           "OrderID":10282,
           "CustomerID":"ROMEY",
           "OrderDate":"1996-08-15T00:00:00.000Z",
           "ShippedDate":"1996-08-21T00:00:00.000Z",
           "Freight":12.69,
           "ShipName":"Romero y tomillo",
           "ShipAddress":"Gran Vía, 1",
           "ShipCity":"Madrid",
           "ShipRegion":null,
           "ShipCountry":"Spain"
        },
        {
           "OrderID":10283,
           "CustomerID":"LILAS",
           "OrderDate":"1996-08-16T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":84.81,
           "ShipName":"LILA-Supermercado",
           "ShipAddress":"Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
           "ShipCity":"Barquisimeto",
           "ShipRegion":"Lara",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10284,
           "CustomerID":"LEHMS",
           "OrderDate":"1996-08-19T00:00:00.000Z",
           "ShippedDate":"1996-08-27T00:00:00.000Z",
           "Freight":76.56,
           "ShipName":"Lehmanns Marktstand",
           "ShipAddress":"Magazinweg 7",
           "ShipCity":"Frankfurt a.M.",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10285,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-20T00:00:00.000Z",
           "ShippedDate":"1996-08-26T00:00:00.000Z",
           "Freight":76.83,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10286,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-21T00:00:00.000Z",
           "ShippedDate":"1996-08-30T00:00:00.000Z",
           "Freight":229.24,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10287,
           "CustomerID":"RICAR",
           "OrderDate":"1996-08-22T00:00:00.000Z",
           "ShippedDate":"1996-08-28T00:00:00.000Z",
           "Freight":12.76,
           "ShipName":"Ricardo Adocicados",
           "ShipAddress":"Av. Copacabana, 267",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10288,
           "CustomerID":"REGGC",
           "OrderDate":"1996-08-23T00:00:00.000Z",
           "ShippedDate":"1996-09-03T00:00:00.000Z",
           "Freight":7.45,
           "ShipName":"Reggiani Caseifici",
           "ShipAddress":"Strada Provinciale 124",
           "ShipCity":"Reggio Emilia",
           "ShipRegion":null,
           "ShipCountry":"Italy"
        },
        {
           "OrderID":10289,
           "CustomerID":"BSBEV",
           "OrderDate":"1996-08-26T00:00:00.000Z",
           "ShippedDate":"1996-08-28T00:00:00.000Z",
           "Freight":22.77,
           "ShipName":"B's Beverages",
           "ShipAddress":"Fauntleroy Circus",
           "ShipCity":"London",
           "ShipRegion":null,
           "ShipCountry":"UK"
        },
        {
           "OrderID":10290,
           "CustomerID":"COMMI",
           "OrderDate":"1996-08-27T00:00:00.000Z",
           "ShippedDate":"1996-09-03T00:00:00.000Z",
           "Freight":79.7,
           "ShipName":"Comércio Mineiro",
           "ShipAddress":"Av. dos Lusíadas, 23",
           "ShipCity":"Sao Paulo",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10291,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-08-27T00:00:00.000Z",
           "ShippedDate":"1996-09-04T00:00:00.000Z",
           "Freight":6.4,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10292,
           "CustomerID":"TRADH",
           "OrderDate":"1996-08-28T00:00:00.000Z",
           "ShippedDate":"1996-09-02T00:00:00.000Z",
           "Freight":1.35,
           "ShipName":"Tradiçao Hipermercados",
           "ShipAddress":"Av. Inês de Castro, 414",
           "ShipCity":"Sao Paulo",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10293,
           "CustomerID":"TORTU",
           "OrderDate":"1996-08-29T00:00:00.000Z",
           "ShippedDate":"1996-09-11T00:00:00.000Z",
           "Freight":21.18,
           "ShipName":"Tortuga Restaurante",
           "ShipAddress":"Avda. Azteca 123",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico"
        },
        {
           "OrderID":10294,
           "CustomerID":"RATTC",
           "OrderDate":"1996-08-30T00:00:00.000Z",
           "ShippedDate":"1996-09-05T00:00:00.000Z",
           "Freight":147.26,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA"
        }];
});

You can refer to our Vue Grid feature tour page for its groundbreaking feature representations. You can also explore our Vue Grid example that shows how to render the Grid in Vue.

Getting started with Vue Grid component

Setup Vue Environment

Create a Vue Application

Adding Syncfusion Grid package

Registering Grid Component

Adding CSS Reference

Adding Grid Component

Defining Row Data

Defining Columns

Module injection

Enable Paging

Enable Sorting

Enable Filtering

Enable Grouping

Enable Aggregate

Run the application

See Also