Handsontable example

by Luiz Vargas

HTML

<div id="example1" class="hot">
  <hot-table :root="root" :settings="hotSettings"></hot-table>
</div>

CSS

.handsontableInput.blue {
  background: blue;
  color: #fff;
}
</style><!-- Ugly Hack due to jsFiddle issue -->

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

Babel + JSX

import Vue from 'vue';
import HotTable from '@handsontable-pro/vue';
import Handsontable from 'handsontable-pro';

class CustomEditor extends Handsontable.editors.TextEditor {
	createElements() {
  	super.createElements();
    
    this.TEXTAREA.className += ' blue';
  }
}

new Vue({
  el: '#example1',
  data: {
    root: 'test-hot',
    hotSettings: {
      data: Handsontable.helper.createSpreadsheetData(6, 10),
      editor: CustomEditor,
      colHeaders: true,
       mergeCells: [
        {row: 0, col: 0, rowspan: 1, colspan: 10}
      ]
    }
  },
  components: {
    HotTable
  }
});