How to get started easily with an example of Syncfusion Vue Data Grid/DataTable?
This document explains about, how to create the Essential JavaScript 2 Grid sample in Vue Data Grid.
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-initCreating a Vue Application
Start a new Vue application using the below Vue CLI command.
vue init webpack-simple quickstart
cd quickstart
npm installAdding 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 --saveRegistering 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 DataGrid 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.
Demo:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart1636225415.zip
Conclusion
We hope you enjoyed learning how to get started easily with an example of Syncfusion Vue Data Grid/DataTable.
You can refer to our Vue Data Grid feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
