Handsontable example

by jabbad

HTML

<div id="example1" class="hot">
  <hot-table ref="hotTableComponent" :settings="hotSettings"></hot-table>
</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.2.2/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';
  
  new Vue({
    el: '#example1',
    data: function() {
      return {
        hotSettings: {
          data: Handsontable.helper.createSpreadsheetData(60, 10),
          colHeaders: true
        }
      }
    },
    components: {
      HotTable
    },
    mounted () {
     let tableInstance = this.$refs.hotTableComponent.hotInstance
     let self = this
    	this.$refs.hotTableComponent.hotInstance.updateSettings({
        cells: function (row, col) {
          let cell = tableInstance.getCell(row, col)
         
          return cell
        }
      })
    }
  });