Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue data grid

Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

A data-grid components Library with Vue.js 2.0. This lets you include a datagrid into your vue web application.

Data is defined as a json object in the file “vue-data-grid/examples/routers/datagrid_test.vue”. You can link callbacks to specfic actions, in your template page:

  <VueDataGrid :fields="fields" :firstItem="firstItem" :items="excelList" 
:rowsHeight="rowsHeight" width="80%" height="320px"> </VueDataGrid>

By default, it prints some data to the console:

methods: {
onItemClick: function(item, key, value, index, type, icontype) {
console.log('onItemClick key: ' + key + ' value: ' + value + ' columnindex: ' + index +' type: ' + type + ' icontype: ' + icontype);
return true;
onItemChange: function(item,key,index,type) {
console.log('onItemChange item.date:' + item.date + ' key:' + key + ' index:'+index+ ' type:'+type);


Open a terminal and type

npm install vue-data-grid -S

To use in your project, use this JavaScript code:

import Vue from 'vue'
import DataGridEdit from 'vue-data-grid-edit'
import 'vue-data-grid-edit/styles/datagrid.css';


Github: https://github.com/hanzhanyong/vue-data-grid

← vue dice roller Vue file upload →

© vuejsexamples.net - Privacy Policy - Cookie Policy