Official Vue 2 wrapper for Handsontable data grid with spreadsheet-like features.
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Internal helper functions and utilities that support the Vue wrapper functionality. These are primarily used for internal component management and Vue-Handsontable integration.
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>;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;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>;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;Warning messages and constants used throughout the wrapper.
/**
* Warning message displayed when trying to access destroyed Handsontable instance
*/
const HOT_DESTROYED_WARNING: string;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);
}
}
}
}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;
}
}
}
}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 }, ... }/**
* 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;
}/**
* 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.