vue-handsontable-official

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

Table of contents

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

Installation

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:

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

<script>
  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: {
      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.

Examples

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.

License

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

Contact

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

Other Wrappers

Handsontable comes with more wrappers and directives for popular frameworks:

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