@handsontable/vue
Advanced tools
Handsontable's wrapper for Vue combines data grid features with spreadsheet-like UX.
It provides data binding, data validation, filtering, sorting, and CRUD operations.
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
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.
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>
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.
Handsontable is a commercial software with two licenses available:
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.
[14.4.0] - 2024-06-11
manualRowResize plugin with a method to retrieve the row height value from the last manual adjustment attempt. #10941dataDotNotation option which, when set as false allows using object keys with dots. #10973rollup version between the wrappers and updated the rollup plugin dependencies. #10962Ctrl/Cmd + Enter keyboard shortcut for comments. #10920imeFastEdit option being reset after updateSettings call #10933stretchH: 'all' option. #10954updateSettings method call. #10955time column type. #10956correctFormat usage. #10957GhostTable. #10961setDataAtRowProp error when saving data into a trimmed-out column. #10964namedExpressions. #10986getShortcuts method. #10910For more information on Handsontable 14.4.0, see:
FAQs
Best Data Grid for Vue with Spreadsheet Look and Feel.
We found that @handsontable/vue demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.