JavaScript Data Grid Installation in Vue 2

Vue 2 Data GridInstallation in Vue 2

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

On this page

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/styles/handsontable.min.css';
  import 'handsontable/styles/ht-theme-main.min.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>

TIP

You can reduce the size of your bundle by importing and registering only the modules that you need.