Handsontable in Vue.js standalone Handsontable in Vue.js standalone vue.js vue.js

Handsontable in Vue.js standalone


The information is all in their documentation, albeit not beginner friendly.

https://github.com/handsontable/vue-handsontable-official

The code example is for compiled Vue (using import), but for CDN use, it states:

The component will be available as Handsontable.vue.HotTable

so you can't reference the component with HotTable, but have to use the namespaced version: components: {HotTable: Handsontable.vue.HotTable}

Also, your data is not declared properly, and you aren't passing any data to the hot-table component.

TL;DR;

Here's what it should look like:

new Vue({  el: '#app',  components: {    HotTable: Handsontable.vue.HotTable  },  data: function() {    return{      tableData: [        ['', 'Tesla', 'Mercedes', 'Toyota', 'Volvo'],        ['2019', 10, 11, 12, 13],        ['2020', 20, 11, 14, 13],        ['2021', 30, 15, 12, 13]      ]    }  },});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script><link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@handsontable/vue/dist/vue-handsontable.min.js"></script>  <div class="container" id="app">  <div>    <hot-table :data="tableData" licenseKey="non-commercial-and-evaluation"/>  </div></div>


A free open source alternative:https://codesandbox.io/embed/vue-default-template-p4hwn

<html><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script><script src="https://bossanova.uk/jexcel/v3/jexcel.js"></script><script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script><link rel="stylesheet" href="https://bossanova.uk/jexcel/v3/jexcel.css" type="text/css" /><link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" /><div id="spreadsheet"></div><input type="button" value="Add new row" onclick="vm.insertRow()" /><script>var options = {    data:[[]],    minDimensions:[10,10],}var vm = new Vue({    el: '#spreadsheet',    mounted: function() {        let spreadsheet = jexcel(this.$el, options);        Object.assign(this, spreadsheet);    }}); </script></html>


matomo