A Vue.js wrapper for the the Handsontable spreadsheet component.


For detailed installation instructions, please take a look at our wiki under "Installation guide".

Basic usage

vue-handsontable-official creates a <HotTable> component. You can use it just like any other Vue component. For example:

  <div id="hot-preview">
    <HotTable :root="root" :settings="hotSettings"></HotTable>

  import HotTable from 'vue-handsontable-official';
  import Vue from 'vue';

  export default {
    data: function() {
      return {
        root: 'test-hot',
        hotSettings: {
          data: [['sample', 'data']],
          colHeaders: true
    components: {

  #test-hot {
    width: 600px;
    height: 400px;
    overflow: hidden;

Note, that you can pass options to Handsontable either as:

  • individual component properties
<HotTable root="hot-example" :data="hotData" :rowHeaders="true"/>
  • an object passed to a single settings property
<HotTable root="hot-example" :settings="settingsObject" />

The root property declares the id of the root element for the table. It is optional - if it isn't provided, the table will get a randomly generated id.