@handsontable/vue is the official Vue 2 wrapper for Handsontable, providing spreadsheet-like data grid functionality within Vue applications. It offers Vue components that wrap Handsontable's powerful data grid with features like editing, validation, sorting, filtering, formulas, and extensive customization options.
npm install handsontable @handsontable/vue// Primary components
import { HotTable, HotColumn, BaseEditorComponent } from "@handsontable/vue";
// Default import (HotTable)
import HotTable from "@handsontable/vue";
// Handsontable core (required peer dependency)
import Handsontable from "handsontable";
import { registerAllModules } from "handsontable/registry";
// Register all Handsontable modules
registerAllModules();// Primary components
const { HotTable, HotColumn, BaseEditorComponent } = require("@handsontable/vue");
// Handsontable core
const Handsontable = require("handsontable");
const { registerAllModules } = require("handsontable/registry");
// Register all Handsontable modules
registerAllModules();<!-- Handsontable core CSS and JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" />
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<!-- Vue 2 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<!-- Handsontable Vue wrapper -->
<script src="https://cdn.jsdelivr.net/npm/@handsontable/vue/dist/vue-handsontable.min.js"></script>
<script>
// Components available as Handsontable.vue.*
const { HotTable, HotColumn, BaseEditorComponent } = Handsontable.vue;
</script>// For TypeScript projects, ensure proper type definitions
import type { Handsontable as HandsontableNamespace } from "handsontable/base";
import type { GridSettings, CellProperties } from "handsontable/settings";
// Vue component types
import type { Vue } from "vue/types/vue";
import type { VNode } from "vue/types/vnode";<template>
<hot-table
:data="data"
:row-headers="true"
:col-headers="true"
:multi-column-sorting="true"
license-key="non-commercial-and-evaluation"
>
<hot-column title="Company" data="company" width="100"></hot-column>
<hot-column title="Country" data="country" type="dropdown" :source="countries"></hot-column>
<hot-column title="Rating" data="rating" type="numeric"></hot-column>
</hot-table>
</template>
<script>
import { HotTable, HotColumn } from '@handsontable/vue';
import { registerAllModules } from 'handsontable/registry';
// Register Handsontable modules
registerAllModules();
export default {
components: {
HotTable,
HotColumn,
},
data() {
return {
data: [
{ company: 'Tagcat', country: 'United Kingdom', rating: 4.4 },
{ company: 'Zoomzone', country: 'Japan', rating: 4.5 },
],
countries: ['United Kingdom', 'Japan', 'United States']
};
}
}
</script>The wrapper consists of three main components that provide different levels of integration:
The HotTable component provides the primary data grid functionality with full Vue integration and all Handsontable features.
interface HotTable extends Vue {
// Instance access
hotInstance?: Handsontable | null;
// Configuration
id?: string;
settings?: Handsontable.GridSettings;
wrapperRendererCacheSize?: number;
// All Handsontable options are available as props
data?: any[][];
licenseKey?: string;
rowHeaders?: boolean;
colHeaders?: boolean | string[];
// ... all other Handsontable.GridSettings properties
}The HotColumn component enables declarative column definition with support for custom renderers and editors.
interface HotColumn extends Vue {
// Column configuration properties
title?: string;
data?: string | number;
type?: string;
width?: number;
renderer?: string | Function;
editor?: string | Function;
// ... all other Handsontable column settings
}BaseEditorComponent provides a Vue-based foundation for creating custom cell editors that integrate seamlessly with Handsontable's editing system.
class BaseEditorComponent extends Vue implements Handsontable.editors.BaseEditor {
// Editor lifecycle methods
focus(): void;
getValue(): any;
setValue(value?: any): void;
open(event?: Event): void;
close(): void;
// Current cell context
instance: Handsontable | null;
row: number | null;
col: number | null;
TD: HTMLTableCellElement | null;
originalValue: any;
cellProperties: Handsontable.CellProperties | null;
}Vue-based custom cell renderers allow you to create rich, interactive cell content using Vue components.
interface RendererProps {
hotInstance: Handsontable;
TD: HTMLTableCellElement;
row: number;
col: number;
prop: string;
value: any;
cellProperties: Handsontable.CellProperties;
isRenderer: true;
}Internal helper functions and utilities that support the Vue wrapper functionality and component integration.
function prepareSettings(props: any, currentSettings?: Handsontable.GridSettings): Handsontable.GridSettings;
function createVueComponent(vNode: VNode, parent: Vue, props?: any, data?: any): EditorComponent;
function findVNodeByType(componentSlots: any, type: string): VNode | null;// Main component interfaces
interface HotTableData {
__internalEdit: boolean;
__hotInstance: Handsontable | null;
miscCache?: {
currentSourceColumns?: number;
};
hotInstance?: Handsontable | null;
columnSettings: HotTableProps[];
rendererCache: any; // LRU cache
editorCache: Map<string, EditorComponent>;
}
interface HotTableMethods {
hotInit(): void;
getColumnSettings(): HotTableProps[] | void;
getGlobalRendererVNode(): VNode | void;
getGlobalEditorVNode(): VNode | void;
getRendererWrapper(vNode: VNode, containerComponent: Vue): (...args) => HTMLElement;
getEditorClass(vNode: VNode, containerComponent: Vue): typeof Handsontable.editors.BaseEditor;
matchHotMappersSize(): void;
}
interface HotTableProps extends Handsontable.GridSettings {
id?: string;
settings?: Handsontable.GridSettings;
wrapperRendererCacheSize?: number;
}
interface HotColumnMethods {
createColumnSettings(): void;
}
interface EditorComponent extends Vue {
focus(): void;
open(event?: Event): void;
close(): void;
getValue(): any;
setValue(newValue?: any): void;
[additional: string]: any;
}