Skip to content
Vue Data Grid with Spreadsheet Look & Feel. Official Vue wrapper for Handsontable.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.config Remove any mentions of Handsontable Pro (#112) Feb 27, 2019
.github Rewrite the component to Typescript + other improvements. (#77) Sep 17, 2018
src Remove any mentions of Handsontable Pro (#112) Feb 27, 2019
test Remove any mentions of Handsontable Pro (#112) Feb 27, 2019
.babelrc Remove any mentions of Handsontable Pro (#112) Feb 27, 2019
.gitignore Remove any mentions of Handsontable Pro (#112) Feb 27, 2019
.npmignore
.release.json Update generate-release config. Mar 30, 2018
.travis.yml Make a workaround for the `cssstyle` package. (#66) Jul 10, 2018
CONTRIBUTING.md Remove any mentions of Handsontable Pro (#112) Feb 27, 2019
LICENSE
README.md Remove any mentions of Handsontable Pro (#112) Feb 27, 2019
package-lock.json
package.json 4.0.0 Mar 6, 2019
rollup.config.js Rewrite the component to Typescript + other improvements. (#77) Sep 17, 2018
test-tsconfig.json Remove any mentions of Handsontable Pro (#112) Feb 27, 2019
tsconfig.json
yarn.lock 4.0.0 Mar 6, 2019

README.md

Handsontable for Vue

This is the official wrapper of Handsontable data grid for Vue.
It provides data binding, data validation, filtering, sorting and more.

npm npm Build status



Installation

Use npm to install this wrapper together with Handsontable.

npm install handsontable @handsontable/vue

You can load it directly from jsDelivr as well.

<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/vue/dist/vue-handsontable.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">

The component will be available as Handsontable.vue.HotTable.

Usage

Use this data grid as you would any other component in your application. Options can be set as HotTable props.

Styles

@import '~handsontable/dist/handsontable.full.css';

Vue Component

<template>
  <hot-table :data="data" colHeaders="true" rowHeaders="true" width="600" height="300"></hot-table>
</template>

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

  export default {
    data: function() {
      return {
        data: [
          ['', 'Tesla', 'Mercedes', 'Toyota', 'Volvo'],
          ['2019', 10, 11, 12, 13],
          ['2020', 20, 11, 14, 13],
          ['2021', 30, 15, 12, 13]
        ],
      };
    },
    components: {
      HotTable
    }
  }
</script>
See the live demo

Features

A list of some of the most popular features:

  • Multiple column sorting
  • Non-contiguous selection
  • Filtering data
  • Export to file
  • Validating data
  • Conditional formatting
  • Merging cells
  • Custom cell types
  • Freezing rows/columns
  • Moving rows/columns
  • Resizing rows/columns
  • Hiding rows/columns
  • Context menu
  • Comments
  • Auto-fill option

Documentation

Support and contribution

We provide support for all users through GitHub issues. If you have a commercial license then you can add a new ticket through the contact form.

If you would like to contribute to this project, make sure you first read the guide for contributors.

Browser compatibility

Handsontable is compatible with modern browsers such as Chrome, Firefox, Safari, Opera, and Edge. It also supports Internet Explorer 9 to 11 but with limited performance.

License

This wrapper is released under the MIT license but under the hood it uses Handsontable, which is dual-licensed. You can either use it for free in all your non-commercial projects or purchase a commercial license.

Free license Paid license
For non-commercial purposes such as teaching, academic research, personal experimentation, and evaluating on development and testing servers. For all commercial purposes
All features are available All features are available
Community support Dedicated support
Read the license See plans

License key

The license key is obligatory since Handsontable 7.0.0 (released in March 2019).

If you use Handsontable for purposes not intended toward monetary compensation such as, but not limited to, teaching, academic research, evaluation, testing and experimentation, pass the phrase 'non-commercial-and-evaluation', as presented below.

You can pass it in the settings object:

settings: {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  licenseKey: 'non-commercial-and-evaluation'
}

Alternatively, you can pass it to a licenseKey prop:

<hot-table :settings="settings" licenseKey="non-commercial-and-evaluation" />

If, on the other hand, you use Handsontable in a project that supports your commercial activity, then you must purchase the license key at handsontable.com.

The license key is validated in an offline mode. No connection is made to any server. Learn more about how it works.



Created by Handsoncode with ❤ and ☕ in Tricity.

You can’t perform that action at this time.