Search results

Getting started with Vue Grid component

30 Mar 2021 / 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.

Copied to clipboard
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.

Copied to clipboard
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 Grid component, use the following command

Copied to clipboard
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.

Copied to clipboard
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.

Copied to clipboard
<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 %}

Copied to clipboard
<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.

Copied to clipboard
<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.
Copied to clipboard
<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 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.

Register the required array of modules under the key grid in the provide section.

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
Copied to clipboard
<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 %}
Copied to clipboard
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
Copied to clipboard
<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 %}
Copied to clipboard
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
Copied to clipboard
<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 %}
Copied to clipboard
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
Copied to clipboard
<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 %}
Copied to clipboard
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
Copied to clipboard
<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 %}
Copied to clipboard
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.

Copied to clipboard
npm run dev
Source
Preview
app.vue
datasource.js
Copied to clipboard
<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 %}
Copied to clipboard
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"
        }];
});