JavaScript Data Grid Installation in Vue 3

Vue 3 Data GridInstallation in Vue 3

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

On this page

Vue 3 version support

Handsontable supports the following Vue 3 versions:

Handsontable version Vue 3 version
11.0.0 and lower No Vue 3 support
11.1.0 and higher 3.2.0 and higher

Handsontable supports Vue 3 versions 3.2.0 and higher, including all minor and patch versions within the Vue 3.x release line (e.g., 3.2.x, 3.3.x, 3.4.x, etc.).

Install with npm

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

npm install handsontable @handsontable/vue3

Basic usage

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

<script>
  import { defineComponent } from 'vue';
  import { HotTable } from '@handsontable/vue3';
  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 defineComponent({
    data() {
      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.