Installations
npm install @handsontable/vue3Developer Guide
Typescript
Yes
Module System
CommonJS, ESM
Node Version
22.9.0
NPM Version
10.8.3
Releases
Contributors
Languages
JavaScript (93.4%)
TypeScript (4.92%)
SCSS (1.09%)
CSS (0.37%)
Vue (0.21%)
EJS (0.01%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
Download Statistics
Total Downloads
381,682
Last Day
1,641
Last Week
8,401
Last Month
28,302
Last Year
217,757
GitHub Statistics
NOASSERTION License
20,604 Stars
8,666 Commits
3,105 Forks
454 Watchers
149 Branches
133 Contributors
Updated on Mar 14, 2025
Bundle Size
5.59 kB
Minified
2.10 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
15.1.0
Package Id
@handsontable/vue3@15.1.0
Unpacked Size
346.90 kB
Size
234.49 kB
File Count
26
NPM Version
10.8.3
Node Version
22.9.0
Published on
Feb 20, 2025
Total Downloads
Cumulative downloads
Total Downloads
381,682
Last Day
22.9%
1,641
Compared to previous day
Last Week
31.3%
8,401
Compared to previous week
Last Month
42.5%
28,302
Compared to previous month
Last Year
61.2%
217,757
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
Dev Dependencies
31
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.
1npm install handsontable @handsontable/vue3
You can load it directly from jsDelivr as well.
1<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script> 2<script src="https://cdn.jsdelivr.net/npm/@handsontable/vue3/dist/vue-handsontable.min.js"></script> 3 4<link href="https://cdn.jsdelivr.net/npm/handsontable/styles/handsontable.min.css" rel="stylesheet"> 5<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
1@import '~handsontable/styles/handsontable.min.css'; 2@import '~handsontable/styles/ht-theme-main.min.css';
Vue 3 Component
1<template> 2 <div class="ht-theme-main-dark-auto"> 3 <hot-table 4 :data="data" 5 :row-headers=true 6 :col-headers=true 7 :navigable-headers=true 8 :tab-navigation=true 9 :multi-column-sorting=true 10 header-class-name="htLeft" 11 license-key="non-commercial-and-evaluation" 12 > 13 <hot-column title="Company" data="company" width=100></hot-column> 14 <hot-column title="Country" data="country" width=170 type="dropdown" :source="['United Kingdom', 'Japan', 'United States']"></hot-column> 15 <hot-column title="Rating" data="rating" width=100 type="numeric"></hot-column> 16 </hot-table> 17 </div> 18</template> 19 20<script> 21 import { defineComponent } from 'vue'; 22 import { HotTable, HotColumn } from '@handsontable/vue3'; 23 import { registerAllModules } from 'handsontable/registry'; 24 import 'handsontable/styles/handsontable.min.css'; 25 import 'handsontable/styles/ht-theme-main.min.css'; 26 27 // register Handsontable's modules 28 registerAllModules(); 29 30 const ExampleComponent = defineComponent({ 31 data() { 32 return { 33 data: [ 34 { company: 'Tagcat', country: 'United Kingdom', rating: 4.4 }, 35 { company: 'Zoomzone', country: 'Japan', rating: 4.5 }, 36 { company: 'Meeveo', country: 'United States', rating: 4.6 }, 37 ] 38 }; 39 }, 40 components: { 41 HotTable, 42 HotColumn, 43 } 44 }); 45 46 export default ExampleComponent; 47</script>
🚀 Resources
🤔 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 support@handsontable.com 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
No vulnerabilities found.
Reason
all changesets reviewed
Reason
30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
packaging workflow detected
Details
- Info: Project packages its releases by way of GitHub Actions.: .github/workflows/docs-production.yml:21
Reason
SAST tool is run on all commits
Details
- Info: SAST configuration detected: CodeQL
- Info: all commits (30) are checked with a SAST tool
Reason
license file detected
Details
- Info: project has a license file: LICENSE.txt:0
- Warn: project license file does not contain an FSF or OSI license.
Reason
dependency not pinned by hash detected -- score normalized to 9
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/code-quality.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/handsontable/handsontable/code-quality.yml/develop?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/code-quality.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/handsontable/handsontable/code-quality.yml/develop?enable=pin
- Warn: containerImage not pinned by hash: docs/docker/Dockerfile:2: pin your Docker image by updating nginx:alpine to nginx:alpine@sha256:4ff102c5d78d254a6f0da062b3cf39eaf07f01eec0927fd21e219d0af8bc0591
- Warn: npmCommand not pinned by hash: .github/workflows/docs-visual-tests.yml:46
- Warn: npmCommand not pinned by hash: .github/workflows/publish.yml:32
- Info: 93 out of 95 GitHub-owned GitHubAction dependencies pinned
- Info: 8 out of 8 third-party GitHubAction dependencies pinned
- Info: 0 out of 1 containerImage dependencies pinned
- Info: 31 out of 33 npmCommand dependencies pinned
Reason
badge detected: InProgress
Reason
dangerous workflow patterns detected
Details
- Warn: untrusted code checkout '${{ github.event.workflow_run.head_branch }}': .github/workflows/publish.yml:19
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/code-quality.yml:42
- Info: jobLevel 'packages' permission set to 'read': .github/workflows/code-quality.yml:40
- Info: jobLevel 'actions' permission set to 'read': .github/workflows/code-quality.yml:41
- Warn: no topLevel permission defined: .github/workflows/audit.yml:1
- Warn: no topLevel permission defined: .github/workflows/build-all.yml:1
- Warn: no topLevel permission defined: .github/workflows/changelog.yml:1
- Warn: no topLevel permission defined: .github/workflows/code-quality.yml:1
- Warn: no topLevel permission defined: .github/workflows/docs-examples.yml:1
- Warn: no topLevel permission defined: .github/workflows/docs-linter.yml:1
- Warn: no topLevel permission defined: .github/workflows/docs-production.yml:1
- Warn: no topLevel permission defined: .github/workflows/docs-staging.yml:1
- Warn: no topLevel permission defined: .github/workflows/docs-visual-tests.yml:1
- Warn: no topLevel permission defined: .github/workflows/ghcr-cleanup.yml:1
- Warn: no topLevel permission defined: .github/workflows/linter.yml:1
- Warn: no topLevel permission defined: .github/workflows/publish.yml:1
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
- Warn: no topLevel permission defined: .github/workflows/visual-tests-linter.yml:1
- Info: no jobLevel write permissions found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
63 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99
- Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-r7jx-5m6m-cpg9
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-6g33-8w2q-4hxv
- Warn: Project is vulnerable to: GHSA-325j-24f4-qv5x
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-mgfv-m47x-4wqp
- Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-c76h-2ccp-4975
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-92r3-m2mg-pj97
- Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
- Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986 / GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-vhxf-7vqr-mrjg
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Score
5.1
/10
Last Scanned on 2025-03-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More