CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-handsontable--vue

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

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

helper-functions.mddocs/

Helper Functions and Utilities

Internal helper functions and utilities that support the Vue wrapper functionality. These are primarily used for internal component management and Vue-Handsontable integration.

Capabilities

Settings Management

Functions for processing and managing Handsontable settings within Vue components.

/**
 * Rewrite settings object for Handsontable compatibility
 * @param observerSettings - Settings object from Vue component
 * @returns Processed settings compatible with Handsontable
 */
function rewriteSettings(observerSettings: any): any[] | object;

/**
 * Prepare final settings object from component props
 * @param props - Vue component props
 * @param currentSettings - Optional current settings to merge
 * @returns Complete Handsontable.GridSettings object
 */
function prepareSettings(props: any, currentSettings?: Handsontable.GridSettings): Handsontable.GridSettings;

/**
 * Filter only assigned props from component props object
 * @param props - Component props object
 * @returns Filtered props with only assigned values
 */
function filterPassedProps(props: any): VueProps<HotTableProps>;

Component Factory Functions

Functions for creating and managing Vue component integration.

/**
 * Generate Vue props schema from Handsontable configuration
 * @param source - Source identifier ('HotTable' | 'HotColumn')
 * @returns Vue props configuration object
 */
function propFactory(source: string): VueProps<HotTableProps>;

/**
 * Create Vue component instance from VNode
 * @param vNode - Vue VNode to instantiate
 * @param parent - Parent component instance
 * @param props - Props to pass to component
 * @param data - Data to pass to component
 * @returns EditorComponent instance
 */
function createVueComponent(vNode: VNode, parent: Vue, props?: any, data?: any): EditorComponent;

VNode Utilities

Functions for working with Vue Virtual DOM nodes and component slots.

/**
 * Find VNode by type attribute in component slots
 * @param componentSlots - Component $slots object
 * @param type - Type attribute to search for (e.g., 'hot-renderer', 'hot-editor')
 * @returns Found VNode or null
 */
function findVNodeByType(componentSlots: any, type: string): VNode | null;

/**
 * Get all HotColumn component instances from children
 * @param children - Array of child components
 * @returns Array of HotColumn component instances
 */
function getHotColumnComponents(children: any[]): Array<any>;

Watch Prevention Utilities

Functions for managing Vue reactivity and preventing infinite update loops.

/**
 * Prevent internal edit watches from triggering reactive updates
 * @param component - Vue component instance
 */
function preventInternalEditWatch(component: Vue): void;

Constants

Warning messages and constants used throughout the wrapper.

/**
 * Warning message displayed when trying to access destroyed Handsontable instance
 */
const HOT_DESTROYED_WARNING: string;

Usage Examples

Settings Processing Example

import { prepareSettings, filterPassedProps } from '@handsontable/vue/helpers';

// In component methods
export default {
  methods: {
    updateHotSettings() {
      // Filter only assigned props
      const assignedProps = filterPassedProps(this.$props);
      
      // Prepare settings for Handsontable
      const settings = prepareSettings(assignedProps, this.currentSettings);
      
      // Update Handsontable instance
      if (this.hotInstance) {
        this.hotInstance.updateSettings(settings);
      }
    }
  }
}

Component Creation Example

import { createVueComponent, findVNodeByType } from '@handsontable/vue/helpers';

// Finding and creating editor component
export default {
  methods: {
    createCustomEditor() {
      // Find editor VNode in slots
      const editorVNode = findVNodeByType(this.$slots, 'hot-editor');
      
      if (editorVNode) {
        // Create component instance
        const editorComponent = createVueComponent(
          editorVNode, 
          this, 
          { isEditor: true },
          { cellData: this.currentCellData }
        );
        
        return editorComponent;
      }
    }
  }
}

Props Factory Usage

import { propFactory } from '@handsontable/vue/helpers';

// Generate props for HotTable component
const hotTableProps = propFactory('HotTable');

// Generated props include all Handsontable settings plus wrapper-specific props
console.log(hotTableProps);
// Output: { data: { type: Array }, licenseKey: { type: String }, ... }

Type Definitions

Utility Interfaces

/**
 * Vue props configuration type
 */
interface VueProps<T> {
  [K in keyof T]: {
    type: any;
    default?: any;
    required?: boolean;
    validator?: Function;
  };
}

/**
 * Editor component interface
 */
interface EditorComponent extends Vue {
  focus(): void;
  open(event?: Event): void;
  close(): void;
  getValue(): any;
  setValue(newValue?: any): void;
  [additional: string]: any;
}

/**
 * Hot table props interface extending Handsontable settings
 */
interface HotTableProps extends Handsontable.GridSettings {
  id?: string;
  settings?: Handsontable.GridSettings;
  wrapperRendererCacheSize?: number;
}

Internal Processing Types

/**
 * Settings processing result
 */
interface ProcessedSettings {
  hotSettings: Handsontable.GridSettings;
  vueOptions: any;
  componentRefs: any;
}

/**
 * Component slot information
 */
interface SlotInfo {
  type: 'renderer' | 'editor';
  vNode: VNode;
  props: any;
  columnIndex?: number;
}

These helper functions are primarily for internal use by the wrapper components but understanding them can be helpful for advanced customization and debugging scenarios.

docs

custom-editors.md

custom-renderers.md

helper-functions.md

hot-column.md

hot-table.md

index.md

tile.json