Tutorial: Installation

Handsontable for Vue is the official wrapper for Handsontable, a JavaScript data grid component with a spreadsheet look & feel. It easily integrates with any data source and comes with lots of useful features like data binding, validation, sorting or powerful context menu.

Installation

This component needs the Handsontable library to work. We suggest using npm to install the package.

npm install handsontable @handsontable/vue

Basic usage

Vue Component

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

<script>
  import { HotTable } from '@handsontable/vue';
  import Vue from 'vue';

  export default {
    data: {
      settings: {
        data: [
          ["", "Ford", "Volvo", "Toyota", "Honda"],
          ["2016", 10, 11, 12, 13],
          ["2017", 20, 11, 14, 13],
          ["2018", 30, 15, 12, 13]
        ],
        colHeaders: true,
        rowHeaders: true,
      }
    },
    components: {
      'hottable': Handsontable.vue.HotTable
    }
  }
</script>

<style src="../node_modules/handsontable/dist/handsontable.full.css"></style>
<style>
  #hot-preview {
    width: 600px;
    height: 400px;
    overflow: hidden;
  }
</style>
        
        

License

Handsontable for Vue is an open source library released free under the MIT license.

The MIT license