@handsontable/vue

Data Grid for Vue

Handsontable's wrapper for Vue combines data grid features with spreadsheet-like UX.
It provides data binding, data validation, filtering, sorting, and CRUD operations.

Features

The most popular features of Handsontable for Vue:

  ✓  Multiple column sorting
  ✓  Non-contiguous selection
  ✓  Filtering data
  ✓  Export to file
  ✓  Validating data
  ✓  Conditional formatting
  ✓  Merging cells
  ✓  Freezing rows/columns
  ✓  Moving rows/columns
  ✓  Resizing rows/columns
  ✓  Hiding rows/columns
  ✓  Context menu
  ✓  Comments

Documentation

• Developer guides
• API Reference
• Change log
• Demo

Get Started

Install with npm

Run the following command in your terminal

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>

View live demo

Support

We provide support for developers working with commercial version via contact form or at [e-mail].

If you use a non-commercial version then please ask your tagged question on StackOverflow.

License

Handsontable is a commercial software with two licenses available:

• Free for non-commercial purposes such as teaching, academic research, and evaluation. Read it here.
• Commercial license with support and maintenance included. See pricing plans.

License key

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

If you use the free for non-commercial license of Handsontable, then pass the phrase 'non-commercial-and-evaluation', as described in this documentation.

Proudly created and maintained by the Handsontable Team.

Changelog

[8.4.0] - 2021-05-11

Added

• Introduced a separated attribute for the label options (the label DOM element may wrap input or be placed next to it). #3172
• Introduced the modifyAutoColumnSizeSeed hook to let developers overwrite the default behaviour of the AutoColumnSize sampling. #3339
• Added support for hiding columns for the NestedHeaders plugin. #6879
• Added ability to skip stacking actions by the UndoRedo plugin and introduced new hooks. #6948
• Added 2 new hooks, beforeHighlightingColumnHeader and beforeHighlightingRowHeader. Use them to retrieve a header element (<th>) before it gets highlighted. (#7528)
• Added a new method, indexMapper.unregisterAll(). Use it to unregister all collected index maps from all map collections types. (#7528)
• Added a new method, indexMapper.createChangesObserver(). Use it to listen to any changes made to indexes while Handsontable is running. (#7528)
• Added a new method, indexMapper.createAndRegisterIndexMap(). Use it to create and register a new index map. (#7528)

Fixed

• Fixed a problem with sorting the checkbox-typed cells and an issue with empty cells not being displayed properly. #4047
• Fixed a problem where undoing the removal of row with readOnly cells was not performed properly. #4754
• Fixed state-change resolving for externally added checkboxes. #5934
• Fixed a problem with the native selection being removed with the fragmentSelection option enabled. #6083
• Fixed a bug where number of columns rendered in the viewport was not correct. #6115
• Fixed a bug with the Dropdown Menu not opening on Android devices. #6212
• Fixed the double-tap issue on iOS. #6961
• Fixed a problem with the Comments editor being destroyed after destroying another Handsontable instance. #7091
• Fixed incorrect numericFormat's type definition. #7420
• Fixed the trimWhitespace tests on Firefox. #7593
• Fixed the [NPM Audit] Github Action job to report found vulnerabilities. #7621
• Fixed some minor iOS problems. #7659
• Fixed the TypeScript definition for the suspended rendering feature. #7666
• Fixed the postbuild and examples:install scripts on Windows. #7680
• Fixed the contents of the production package.json. #7723
• Fixed an issue, where the callbacks for the UndoRedo plugin were called twice. #7825
• Vue: Fixed a problem with displaying and removing rows in the Nested Rows plugin. #7548
• React: Fixed an incompatibility in the property type definitions for the HotColumn component. #7612

Changed

• Enhanced the ESLint config file by adding a rule that checks if there are new lines missing before some keywords or statements. #7691

For more information on Handsontable 8.4.0, see:

• Blog post (8.4.0)
• Documentation (8.4.0)
• Release notes (8.4.0)