Getting Started with the Vue Data Grid Component in Vue 2

23 Jul 20268 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Vue Data Grid component.

To get started quickly with Vue Data Grid, check this video:

Prerequisites

Requirement Version
Vue 2.6 or higher
Node.js 16.0.0 or above

Vue supported versions

Vue version Minimum Syncfusion Vue Data Grid version
Vue v2.7 20.3.47 and above

Browser support

Browser Supported versions
Chrome Latest
Firefox Latest
Opera Latest
Edge 13+
Internet Explorer (IE) 11+
Safari 9+
iOS Safari 9+
Android Browser / Chrome for Android 4.4+
Windows Mobile IE 11+

Setup the Vue 2 project

Easily set up a Vue 2 application using Vue CLI, which provides a reliable development environment, a streamlined project structure, and optimized builds compared to older setup tools. For detailed steps, refer to the Vue CLI installation instructions.

Note: To create a Vue 2 application using Vue CLI, refer to this documentation for more details.

To create a new Vue 2 application, run the following commands based on your preferred package manager:

npm install -g @vue/cli
vue create quickstart

or

yarn global add @vue/cli
vue create quickstart

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

  • Which linter to use? → Default ([Vue 2] babel, eslint)
  • Install with npm and start now? → Yes

Selecting Yes automatically installs the project dependencies and starts the development server.

After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.

Navigate to the project directory:

cd quickstart

Adding Vue Grid packages

To install the Grids package, use the following command:

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

or

yarn add @syncfusion/ej2-vue-grids

Adding CSS reference

Themes for Syncfusion® Data Grid components can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following command:

npm install @syncfusion/ej2-material3-theme --save

Then add the following CSS reference to the src/App.vue file:

<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/styles/grid/index.css";
</style>

Adding Data Grid component

The Data Grid code should be added in the src/App.vue file.

<template>
    <div id="app">
        <!-- Assigns the dataset to the Grid component -->
        <ejs-grid :dataSource="data">
          <!-- Define the columns to be displayed -->
          <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
            <e-column field='CustomerName' headerText='Customer Name' width=100></e-column>
            <e-column field='OrderDate' headerText='Order Date' width='100' format='yMd' textAlign='Right'></e-column>
            <e-column field='Freight' headerText='Freight' width=100 format='C2' textAlign='Right'></e-column>
            <e-column field='ShipCountry' headerText='Ship Country' width=100></e-column>
          </e-columns>
        </ejs-grid>
    </div>
</template>
<script>

import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
export default {
name: "App",
  components: {
    'ejs-grid': GridComponent,
    'e-column': ColumnDirective,
    'e-columns': ColumnsDirective
  },
  data() {
    return {
      // Defines the data to be displayed in the Grid
      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 },
      ],
    };
  },
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-material3-theme/styles/grid/index.css";
</style>

Run the application

npm run serve

or

yarn run serve

Registering Syncfusion license

The Syncfusion® Vue Data Grid requires a valid license key to be registered in the application. To prevent license validation warnings, refer to the Syncfusion licensing documentation.

Troubleshooting

  • Grid not rendering styles: Ensure the theme CSS is imported in src/App.vue and that you removed any default Vue CLI starter styles that may override the Grid styles.
  • Trial license warning banner: Register a license key via registerLicense() from @syncfusion/ej2-base.

NOTE

Looking for the full Vue Data Grid component overview, features, pricing, and documentation? Visit the Vue Data Grid page.

See also