How to get started easily with an example of Syncfusion Vue data grid/datatable?

1 min read

This document explains you about, how to create the Essential JavaScript 2 Grid sample in Vue.

Setup Vue Environment

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

npm install -g @vue/cli

npm install -g @vue/cli-init

Creating a Vue Application

Start a new Vue application using the below Vue CLI command.

vue init webpack-simple quickstart

cd quickstart

npm install

Adding Syncfusion Grid packages

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

To install Grid component, please use the following command.

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

Registering Grid Component

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

Please refer the following code example.

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

Vue.use(GridPlugin);

Adding CSS reference

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

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

Adding Grid component

Now, you can start adding the Grid component in App.vue file like as shown below.

<template>
  <div id="app">
    <ejs-grid :dataSource="data" :allowPaging='true'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
        <e-column field='CustomerID' headerText='Customer ID' textAlign="Left" width=100></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=100></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' textAlign="Left" width=100></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
 
<script>
  import Vue from "vue";
  import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
  import { data } from './datasource.js';
 
  Vue.use(GridPlugin);
 
  export default {
    data () {
      return {
        data: data
      }
    },
    provide: {
      grid: [Page]
    }
  }
</script>
 
<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>

Running the application

The Vue Grid application is configured to compile. Now, you can run the application in a browser. Use the following command to run the application.

npm run dev

The output will appear as follows.

Syncfusion Vue data grid