Data Grid for Vue 3
Handsontable's wrapper for Vue 3 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 3:
✓ 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
Get Started
Install with npm
Run the following command in your terminal
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/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 3 Component
<template>
<hot-table :data="data" :rowHeaders="true" :colHeaders="true"></hot-table>
</template>
<script>
import { defineComponent } from 'vue';
import { HotTable } from '@handsontable/vue3';
import { registerAllModules } from 'handsontable/registry';
// 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>
<style src="handsontable/dist/handsontable.full.css"></style>View live demo
Support
We provide support for developers working with commercial version via contact form or at support@handsontable.com.
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 3 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.