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

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.