/ S

Vue 2 Data Grid Installation in Vue 2

Install Handsontable's Vue 2 wrapper via npm, import the stylesheets, and get your application up and running.

In this article

Install with npm

This component needs the Handsontable library to work. Use npm to install the packages.

npm install handsontable @handsontable/vue

Basic usage

<template>
  <hot-table :data="data" :rowHeaders="true" :colHeaders="true"></hot-table>
</template>

<script>
  import { HotTable } from '@handsontable/vue';
  import { registerAllModules } from 'handsontable/registry';
  import 'handsontable/dist/handsontable.full.css';

  // register Handsontable's modules
  registerAllModules();

  export default {
    data: function() {
      return {
        data: [
          ["", "Ford", "Volvo", "Toyota", "Honda"],
          ["2016", 10, 11, 12, 13],
          ["2017", 20, 11, 14, 13],
          ["2018", 30, 15, 12, 13]
        ],
      };
    },
    components: {
      HotTable
    }
  }
</script>

← Basic example in Vue 2 →