or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

custom-editors.mdcustom-renderers.mdhelper-functions.mdhot-column.mdhot-table.mdindex.md
tile.json

tessl/npm-handsontable--vue

Official Vue 2 wrapper for Handsontable data grid with spreadsheet-like features.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@handsontable/vue@16.0.x

To install, run

npx @tessl/cli install tessl/npm-handsontable--vue@16.0.0

index.mddocs/

Handsontable Vue Wrapper

@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.

Package Information

  • Package Name: @handsontable/vue
  • Package Type: npm
  • Language: TypeScript
  • Installation: 
    npm install handsontable @handsontable/vue

Core Imports

ES Modules (ESM)

// 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();

CommonJS

// 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();

CDN Access

<!-- 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>

TypeScript Configuration

// 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";

Basic Usage

<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>

Architecture

The wrapper consists of three main components that provide different levels of integration:

  • HotTable Component: Main data grid component that wraps Handsontable Core with Vue reactivity
  • HotColumn Component: Configuration component for defining column-specific settings and behaviors
  • BaseEditorComponent: Base class for creating custom cell editors that integrate with Vue lifecycle
  • Reactive Integration: Automatic data synchronization between Vue data and Handsontable instance
  • Component Caching: LRU cache system for renderer and editor components to optimize performance

Capabilities

Main Data Grid Component

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
}

Data Grid Component

Column Configuration

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
}

Column Configuration

Custom Cell Editors

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;
}

Custom Editors

Custom Cell Renderers

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;
}

Custom Renderers

Helper Functions and Utilities

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;

Helper Functions

Types

// 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;
}