Syncfusion AI Assistant

How can I help you?

Modules in Vue Grid component

19 May 202613 minutes to read

Syncfusion Vue Grid modules help optimize your application’s bundle size by including only the features you need. To enable a specific Grid feature, import and inject the corresponding Feature Module into your Grid configuration. The available Grid Feature Modules include:

Feature Module Description
Paging Page Inject this module to use paging feature.
Sorting Sort Inject this module to use sorting feature.
Filtering Filter Inject this module to use filtering feature.
Grouping Group Inject this module to use grouping feature.
Lazy Load Grouping LazyLoadGroup Inject this module to use lazy load grouping feature.
Editing Edit Inject this module to use editing feature.
Aggregates Aggregate Inject this module to use aggregate feature.
Column Chooser ColumnChooser Inject this module to use column chooser feature.
Column Menu ColumnMenu Inject this module to use column menu feature.
Command Column CommandColumn Inject this module to use command column feature.
Context Menu ContextMenu Inject this module to use context menu feature.
Detail Row DetailRow Inject this module to use detail template feature.
Foreign Key ForeignKey Inject this module to use foreign key feature.
Resize Resize Inject this module to use resize feature.
Reordering Reorder Inject this module to use reorder feature.
Row Drag and Drop RowDD Inject this module to use row drag and drop feature.
Virtual Scrolling VirtualScroll Inject this module to use virtual scrolling feature.
Infinite Scrolling InfiniteScroll Inject this module to use infinite scrolling feature.
Toolbar Toolbar Inject this module to use toolbar feature.
Excel Export ExcelExport Inject this module to use excel export feature.
PDF Export PdfExport Inject this module to use PDF export feature.

Enabling basic features

The following example demonstrates how to enable basic features such as Paging, Sorting, Filtering, Toolbar and Editing by importing required modules from @syncfusion/ej2-vue-grids and injecting them into the grid component.

<template>
  <div id="app">
    <ejs-grid :dataSource='data' :allowPaging='true' :allowSorting='true' :allowFiltering='true' :pageSettings='pageSettings' 
      :filterSettings='filterSettings' :editSettings='editSettings' :toolbar='toolbar'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' :isPrimaryKey='true' :validationRules='orderIDRules' textAlign='Right' width=90></e-column>
        <e-column field='CustomerName' headerText='CustomerName' :validationRules=' customerNameRules' width=120></e-column>
        <e-column field='OrderDate' headerText='OrderDate' width='100' format='yMd' editType='datepickeredit' textAlign='Right'></e-column>
        <e-column field='Freight' headerText='Freight' format='C2' editType='numericedit' textAlign='Right' width=90></e-column>
        <e-column field='ShipCountry' headerText='ShipCountry' editType='dropdownedit' width=120></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>
import { provide } from "vue";
// Import the required grid modules from the grid package
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Page, Sort, Filter, Edit, Toolbar } from "@syncfusion/ej2-vue-grids";
// Import Grid data from external file
import { data } from "./data";
const pageSettings = { pageSize: 6 };
const filterSettings = { type: "CheckBox" };
const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
const toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const orderIDRules= {required: true, number: true};
const customerNameRules= { required: true };
// Inject required Grid features
provide('grid', [Page, Sort, Filter, Edit, Toolbar]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material3.css";
</style>
<template>
    <div id="app">
      <ejs-grid :dataSource='data' :allowPaging='true' :allowSorting='true' :allowFiltering='true' :pageSettings='pageSettings' 
        :filterSettings='filterSettings' :editSettings='editSettings' :toolbar='toolbar'>
        <e-columns>
          <e-column field='OrderID' headerText='Order ID' :isPrimaryKey='true' :validationRules='orderIDRules' textAlign='Right' width=90></e-column>
          <e-column field='CustomerName' headerText='CustomerName' :validationRules=' customerNameRules' width=120></e-column>
          <e-column field='OrderDate' headerText='OrderDate' width='100' format='yMd' editType='datepickeredit' textAlign='Right'></e-column>
          <e-column field='Freight' headerText='Freight' format='C2' editType='numericedit' textAlign='Right' width=90></e-column>
          <e-column field='ShipCountry' headerText='ShipCountry' editType='dropdownedit' width=120></e-column>
      </e-columns>
    </ejs-grid>
    </div>
</template>
<script>
// Import the required grid modules from the grid package
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Sort, Filter, Edit, Toolbar } from "@syncfusion/ej2-vue-grids";
// Import Grid data from external file
import { data } from "./data";
export default {
  name: "App",
  components: {
    'ejs-grid': GridComponent,
    'e-column': ColumnDirective,
    'e-columns': ColumnsDirective
  },
  data() {
    return {
      data: data,
      pageSettings: { pageSize: 6 },
      filterSettings: { type: "CheckBox" },
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
      orderIDRules: {required: true, number: true},
      customerNameRules: { required: true },
    };
  },
  // Inject required Grid features
  provide: {
    grid: [Page, Sort, Filter, Edit, Toolbar]
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
  @import "../node_modules/@syncfusion/ej2-buttons/styles/material3.css";
  @import "../node_modules/@syncfusion/ej2-calendars/styles/material3.css";
  @import "../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css";
  @import "../node_modules/@syncfusion/ej2-inputs/styles/material3.css";
  @import "../node_modules/@syncfusion/ej2-navigations/styles/material3.css";
  @import "../node_modules/@syncfusion/ej2-popups/styles/material3.css";
  @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css";
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material3.css";
</style>
export const data = [
    { OrderID: 10248, CustomerName: 'Ana Trujillo', OrderDate: new Date(2025, 0, 12), ShipCountry: 'France', Freight: 32.38 },
    { OrderID: 10249, CustomerName: 'Martin Sommer', OrderDate: new Date(2025, 0, 15), ShipCountry: 'Germany', Freight: 11.61 },
    { OrderID: 10250, CustomerName: 'Thomas Hardy', OrderDate: new Date(2025, 1, 5), ShipCountry: 'Brazil', Freight: 65.83 },
    { OrderID: 10251, CustomerName: 'Elizabeth Lincoln', OrderDate: new Date(2025, 1, 18), ShipCountry: 'France', Freight: 41.34 },
    { OrderID: 10252, CustomerName: 'Victoria Ashworth', OrderDate: new Date(2025, 2, 10), ShipCountry: 'Belgium', Freight: 51.30 },
    { OrderID: 10253, CustomerName: 'Martine Rance', OrderDate: new Date(2025, 2, 22), ShipCountry: 'Brazil', Freight: 58.17 },
    { OrderID: 10254, CustomerName: 'John Smith', OrderDate: new Date(2025, 3, 3), ShipCountry: 'USA', Freight: 23.45 },
    { OrderID: 10255, CustomerName: 'Emily Johnson', OrderDate: new Date(2025, 3, 15), ShipCountry: 'Canada', Freight: 45.67 },
    { OrderID: 10256, CustomerName: 'Michael Brown', OrderDate: new Date(2025, 4, 7), ShipCountry: 'UK', Freight: 33.90 },
    { OrderID: 10257, CustomerName: 'Sophia Davis', OrderDate: new Date(2025, 4, 19), ShipCountry: 'Australia', Freight: 29.75 },
    { OrderID: 10258, CustomerName: 'David Wilson', OrderDate: new Date(2025, 5, 2), ShipCountry: 'Germany', Freight: 62.10 },
    { OrderID: 10259, CustomerName: 'Olivia Martinez', OrderDate: new Date(2025, 5, 18), ShipCountry: 'Spain', Freight: 37.50 },
    { OrderID: 10260, CustomerName: 'James Anderson', OrderDate: new Date(2025, 6, 5), ShipCountry: 'Italy', Freight: 48.25 },
    { OrderID: 10261, CustomerName: 'Ava Thomas', OrderDate: new Date(2025, 6, 21), ShipCountry: 'Netherlands', Freight: 27.80 },
    { OrderID: 10262, CustomerName: 'William Taylor', OrderDate: new Date(2025, 7, 9), ShipCountry: 'Sweden', Freight: 55.60 },
    { OrderID: 10263, CustomerName: 'Mia Harris', OrderDate: new Date(2025, 7, 25), ShipCountry: 'Norway', Freight: 21.40 },
    { OrderID: 10264, CustomerName: 'Daniel Clark', OrderDate: new Date(2025, 8, 6), ShipCountry: 'Switzerland', Freight: 49.90 },
    { OrderID: 10265, CustomerName: 'Charlotte Lewis', OrderDate: new Date(2025, 8, 17), ShipCountry: 'Austria', Freight: 34.20 },
    { OrderID: 10266, CustomerName: 'Matthew Hall', OrderDate: new Date(2025, 9, 4), ShipCountry: 'Belgium', Freight: 44.75 },
    { OrderID: 10267, CustomerName: 'Amelia Allen', OrderDate: new Date(2025, 9, 20), ShipCountry: 'Denmark', Freight: 28.60 },
    { OrderID: 10268, CustomerName: 'Christopher Young', OrderDate: new Date(2025, 10, 3), ShipCountry: 'Finland', Freight: 39.85 },
    { OrderID: 10269, CustomerName: 'Harper King', OrderDate: new Date(2025, 10, 14), ShipCountry: 'Ireland', Freight: 36.40 },
    { OrderID: 10270, CustomerName: 'Joshua Wright', OrderDate: new Date(2025, 10, 26), ShipCountry: 'New Zealand', Freight: 52.90 },
    { OrderID: 10271, CustomerName: 'Evelyn Scott', OrderDate: new Date(2025, 11, 5), ShipCountry: 'Japan', Freight: 61.75 }
];