Handson Vue Table

Data does NOT seem to be referenced

by Dave Stewart

HTML

<div id="example1" class="hot">
  
  <h2>Data</h2>
  <pre>{{ table }}</pre>
  
  <h2>1-way update</h2>
  <label>Cell 0-0: 
    <input type="text" v-model="table[0][0]">
  </label>
  
  <h2>Table</h2>
  <hot-table :settings="hotSettings"/>

</div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">
<script src="https://handsontable.com/docs/7.0.3/scripts/jsfiddle-fixer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/[email protected]/dist/vue-handsontable.min.js"></script>

Babel + JSX

import Vue from 'vue';
  import { HotTable } from '@handsontable/vue';
  import Handsontable from 'handsontable';
  
  const table = Handsontable.helper.createSpreadsheetData(2, 2)
  
  new Vue({
    el: '#example1',
    
    components: {
      HotTable
    },
    
    data () {
      return {
      	table,
        hotSettings: {
          data: table,
          colHeaders: true,
          minSpareRows: 1,
        }
      }
    },
  });