@handsontable/vue3

The official Vue 3 wrapper for Handsontable.
JavaScript Data Grid with a spreadsheet-like look and feel.

With its spreadsheet-like editing features, it’s perfect for building data-rich internal apps. It allows users to enter, edit, validate, and process data from various sources. Common use cases include resource planning software (ERP), inventory management systems, digital platforms, and data modeling applications.

Website   —   Documentation   —   Themes   —   API   —   Community

✨ Key Features

  ✅  Built-in themes
  ✅  Flexible API
  ✅  Virtualization
  ✅  IME support
  ✅  Internationalization
  ✅  RTL support
  ✅  Accessibility
  ✅  Keyboard shortcuts
  ✅  Sorting data
  ✅  Filtering data
  ✅  400 built-in formulas
  ✅  Configurable selection
  ✅  Data validation
  ✅  Conditional formatting
  ✅  Merged cells
  ✅  Pinned/frozen columns
  ✅  Hiding columns
  ✅  Right-click context menu

🪄 Installation

Below is the installation guide for the Handsontable with Vue 3 wrapper. If you're using another framework, please refer to its dedicated wrapper for specific installation instructions.

• JavaScript
• React functional component
• React class component
• Angular
• Vue 2

npm install handsontable @handsontable/vue3

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/vue3/dist/vue-handsontable.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/handsontable/styles/handsontable.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/handsontable/styles/ht-theme-main.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/styles/handsontable.min.css';
@import '~handsontable/styles/ht-theme-main.min.css';

Vue 3 Component

<template>
  <div class="ht-theme-main-dark-auto">
    <hot-table
      :data="data"
      :row-headers=true
      :col-headers=true
      :navigable-headers=true
      :tab-navigation=true
      :multi-column-sorting=true
      header-class-name="htLeft"
      license-key="non-commercial-and-evaluation"
    >
      <hot-column title="Company" data="company" width=100></hot-column>
      <hot-column title="Country" data="country" width=170 type="dropdown" :source="['United Kingdom', 'Japan', 'United States']"></hot-column>
      <hot-column title="Rating" data="rating" width=100 type="numeric"></hot-column>
    </hot-table>
  </div>
</template>

<script>
  import { defineComponent } from 'vue';
  import { HotTable, HotColumn } 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();

  const ExampleComponent = defineComponent({
    data() {
      return {
        data: [
          { company: 'Tagcat', country: 'United Kingdom', rating: 4.4 },
          { company: 'Zoomzone', country: 'Japan', rating: 4.5 },
          { company: 'Meeveo', country: 'United States', rating: 4.6 },
        ]
      };
    },
    components: {
      HotTable,
      HotColumn,
    }
  });

  export default ExampleComponent;
</script>

🚀 Resources

• Website
• Demo
• Documentation
• npm
• CDN
• Forum
• Blog
• Contact support team
• Get a quote

🤔 Is Handsontable a Data Grid or a Spreadsheet?

Handsontable is a data grid component written in JavaScript, not a spreadsheet. However, it brings in many features typically found in spreadsheet software. We designed it this way because spreadsheet-like patterns are often the most user-friendly when it comes to data entry and management.

Spreadsheet-like features in Handsontable:

• Keyboard shortcuts compliant with either Google Sheets or Excel
• 400 spreadsheet formulas via native integration with HyperFormula
• Keyboard navigation across headers that can be disabled, making only cells navigable
• TAB navigation across cells that can be disabled
• Built-in undo-redo functionality
• Powerful clipboard capabilities for copy-paste operations
• Ability to scroll the grid within the container (div) or window
• Data binding in the form of an array of objects or arrays of arrays
• Built-in cell editors like a date picker or dropdown list

At first glance, it might seem that a data table, spreadsheet, and data grid are just different names for the same thing - an interactive table displaying data. In reality, these tools serve different purposes and offer distinct functionalities, designed to meet specific needs. Handsontable sits comfortably in the data grid category while incorporating many of the best aspects of spreadsheet software.

🛟 Support

We're here to help!

If you're using Handsontable with a free, non-commercial license, you can:

• Join the conversation on GitHub Discussions to share ideas, suggest features, or discuss changes.
• Report any bugs you find on our GitHub Issue Board.
• Connect with other developers and find answers on our Developer Forum.

If you have a commercial license, feel free to contact us directly at [e-mail] or use our contact form.

📖 Licenses

Handsontable is available under two licensing options, allowing you to choose the one that best fits your needs. Each license comes with its own terms and conditions, as outlined below:

① Free license for non-commercial use, and evaluation purposes

This license is available for non-commercial purposes such as teaching, academic research, or evaluation. It allows you to use Handsontable free of charge under the terms specified in the non-commercial license agreement. Learn more here.

② Commercial license

For commercial use, a paid license is required. This license includes support and maintenance to ensure you get the most out of Handsontable. The commercial license can be purchased directly from Handsoncode or through an authorized reseller. See the pricing page for details.

🔑 License Key

For projects covered by the free non-commercial license, simply use the phrase 'non-commercial-and-evaluation' as your license key.

If you're using Handsontable in a project that supports commercial activities, you'll need to purchase a license key at handsontable.com/pricing. You can find more details in our documentation.

🙌 Contributing

Contributions are welcome, but before you make them, please read the Contributing Guide and accept the Contributor License Agreement.

Created and maintained by the Handsontable Team 👋

© 2012 - 2025 Handsoncode

Changelog

[15.3.0] - 2025-04-29

Added

• Added a missing boolean type to the editor in the React wrapper. #11514
• Fixed the Comments plugin for IME editing and added a new beforeCompositionstart hook. #11521
• Added horizontal scroll to the Filter's "by value" component. #11561
• Added optional formula sanitization for CSV export to prevent CSV Injection attacks. #11592

Changed

• Improved the initialization time of Handsontable with Formulas enabled. #11474
• Changed the size of the Manual Row Resize and Manual Column Resize guide lines. #11507
• Improved the viewport scrolling behavior. #11577

Fixed

• Fixed an issue with the NestedRows plugin duplicating rows when moving child rows. #11362
• Fixed an issue with row resize line alignment and resize handle flickering. #11500
• Fixed an issue with the Autocomplete caret position after using scroll on a list of choices and a problem with the dropdown width. #11503
• Fixed the submenu positioning for all themes. #11505
• Fixed a problem where re-enabling the Hidden Columns configuration caused an error to be thrown if a selection was a part of the hidden range. #11508
• Fixed an issue with an empty parentNode in the table's getCords method. #11509
• Improved the Undo/Redo actions for removing rows and columns. #11515
• Fixed rows' height calculations for merged cells on Safari. #11517
• Fixed the missing (incorrect) render call after dataset change. #11529
• Fixed an issue with the mobile keyboard closing after clicking the filter search input on Android devices. #11532
• Fixed a problem with multiple row header levels being rendered in reverse order. #11533
• Fixed a TypeError error for the AutoRowSize plugin. #11537
• Allow changing the selection after a filter was applied. #11538
• Fixed a problem with the Autocomplete editor rendering very slowly when provided with a long list of choices. #11552
• Fixed an issue with the focus catcher accessibility. #11553
• Fixed a TypeError error being thrown after removing rows on the bottom overlay. #11555
• Fixed calculating the first row height. #11557
• Fixed an issue with highlighting a cell after calling updateData. #11558
• Fixed the "unmerge cells" action triggered form keyboard shortcut. #11559
• Fixed the left/right-arrow shortcuts for menus when the table was configured with layoutDirection: rtl. #11562
• Fixed an issue with duplicate boolean values in the filters. #11563
• Fixed an issue with data sources with non-string values under the name property. #11565
• Fixed the settings object not being updated after adding new hooks. #11566
• Fixed a problem with the table rendering all rows when it's configured to have 0px height. #11567
• Fixed the copy/paste/cut functionalities for web components. #11572
• Fixed the allowInvalid option (both true and false) for the Dropdown Editor. #11587
• Fixed a problem with a deprecation warnings being thrown when using Context Menu's Undo and Redo items. #11588
• Fixed an error being thrown when editing Autocomplete-typed cells with a long list of choices rendered in a small container. #11589
• Ensured that there's a single @charset entry in the classic theme's CSS files and that it's placed at the beginning of those files. #11591