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.


Leave email to receive latest updates!