Vue

by Hans Fel

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable-pro@latest/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable-pro@latest/dist/handsontable.full.css">
<script src="https://cdn.jsdelivr.net/npm/@handsontable-pro/vue@latest/dist/vue-handsontable.min.js"></script>
 <div id="app">
   <HotTable :settings="hotSettings"></HotTable>
 </div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  width: 400px;
  height: 300px;
  overflow: hidden;
}

Vue

new Vue({
  el: "#app",
  created: function (){
    this.newData()
  },
  data() {
    return {
      info: [],
    }
  },    
  computed:{
    hotSettings(){
      return {
        data: this.info,
        colHeaders: ['ID','Name',' pain'],
        rowHeaders: true,
        minRows: 2,
        minCols: 3,
      }
    }
  },
  methods: {
    newData() {
       this.info =  [
         ["a", "b", "c"],
         ["ra", "rb", "rc"]
       ]
      // Handle Axios logic here
   }
 },
  components: {
     'hottable': Handsontable.vue.HotTable
  }
});