Editable Data Table in VueJS
This tutorial assumes that you have a basic understanding of Vue. The article shows how to create a Vue (wrapper) Component for DataGridXL and how you can pass events from DataGridXL to your Vue App.
HTML
<!-- Include Vue & DataGridXL -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://code.datagridxl.com/datagridxl.js"></script>
<div id="app">
<datagridxl v-on:update-data="updateData"></datagridxl>
<div>data: {{ data }}</div>
</div>Javascript
// create a component (wrapper) for DataGridXL
Vue.component('datagridxl', {
template: '<div id="grid" style="height:400px;"></div>',
mounted: function() {
var self = this;
// create grid instance
var grid = new DataGridXL("grid");
// emit "update-data" event when grid data changes
grid.events.on("ready", function(ev){
self.$emit('update-data', JSON.stringify(grid.getData()));
});
grid.events.on("cellvaluechange", function(ev){
self.$emit('update-data', JSON.stringify(grid.getData()));
});
grid.events.on("documentchange", function(ev){
self.$emit('update-data', JSON.stringify(grid.getData()));
});
}
});
// create the Vue app
// add a data property
// add the updateData method
// (called when DGXL component emits 'update-data')
new Vue({
el: '#app',
data: {
data: null
},
methods: {
updateData: function(data){
this.data = data;
}
}
});Result
Change cell values to see "data" update.
data: {{ data }}
View and edit this demo on Codepen.
In the real world you would probably use a more complex setup. For the sake of clarity (& our own sanity) we've kept our demo simple.
Please note that we provide Vanilla Support only.
