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

1. Installation
2. Basic usage
3. Examples
4. License
5. Contact
6. Other wrappers

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

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

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

<script>
  import moment from 'moment';
  import numbro from 'numbro';
  import pikaday from 'pikaday';
  import Zeroclipboard from 'zeroclipboard';
  import Handsontable from 'handsontable';
  import HotTable from 'vue-handsontable-official';
  import Vue from 'vue';

  export default {
    data: function() {
      return {
        root: 'test-hot',
        hotSettings: {
          data: Handsontable.helper.createSpreadsheetData(40, 40),
          colHeaders: true
        }
      };
    },
    components: {
      HotTable
    }
  }
</script>

<style>
  #test-hot {
    width: 600px;
    height: 400px;
    overflow: hidden;
  }
</style>

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.

Please see the /demo directory for a sample app using vue-handsontable-official.

You can check out a live version of this example at handsontable.github.io/vue-handsontable-official/demo.

vue-handsontable-official is released under the MIT license. Copyrights belong to Handsoncode sp. z o.o.

Feel free to give us feedback on this wrapper using this contact form or write directly at [email protected].

Handsontable comes with more wrappers and directives for popular frameworks:

• hot-table (Polymer - WebComponents)
• ngHandsontable (Angular 1)
• react-handsontable (React)