Data Grid Component (HotTable)

/**
 * Main data grid component providing spreadsheet functionality
 * Accepts all Handsontable configuration options as props
 */
interface HotTable extends Vue {
  // Component identification
  id?: string;
  
  // Configuration
  settings?: Handsontable.GridSettings;
  wrapperRendererCacheSize?: number;
  
  // Instance access
  readonly hotInstance?: Handsontable | null;
  
  // Core data and display options
  data?: any[][] | object[];
  licenseKey: string;
  
  // Headers and structure
  rowHeaders?: boolean | string[] | Function;
  colHeaders?: boolean | string[] | Function;
  columns?: Handsontable.ColumnSettings[];
  
  // Interaction options
  readOnly?: boolean;
  contextMenu?: boolean | object;
  multiColumnSorting?: boolean;
  filters?: boolean;
  dropdownMenu?: boolean | object;
  
  // Display options
  width?: string | number;
  height?: string | number;
  theme?: string;
  
  // All Handsontable hooks available as props
  afterChange?: (changes: any[], source: string) => void;
  beforeChange?: (changes: any[], source: string) => void | boolean;
  afterUpdateSettings?: (newSettings: object) => void;
  beforeUpdateSettings?: (newSettings: object) => void;
  afterSelection?: (row: number, column: number, row2: number, column2: number, preventScrolling: any, selectionLayerLevel: number) => void;
  beforeSelection?: (row: number, column: number, row2: number, column2: number, preventScrolling: any, selectionLayerLevel: number) => void;
  // ... all other Handsontable hooks
}

/**
 * Access the underlying Handsontable instance
 * Returns null if instance not initialized or destroyed
 */
readonly hotInstance?: Handsontable | null;

// Access instance in component methods
export default {
  mounted() {
    // Wait for instance to be available
    this.$nextTick(() => {
      if (this.$refs.hotTable.hotInstance) {
        const instance = this.$refs.hotTable.hotInstance;
        
        // Use Handsontable API directly
        instance.selectCell(0, 0);
        instance.updateSettings({ readOnly: true });
        
        // Get data
        const allData = instance.getData();
        const cellValue = instance.getDataAtCell(0, 0);
      }
    });
  }
}

/**
 * Initialize the Handsontable instance with current props
 */
hotInit(): void;

/**
 * Get column settings from HotColumn child components
 * @returns Array of column configurations or undefined
 */
getColumnSettings(): HotTableProps[] | void;

/**
 * Synchronize index mappers with current data dimensions
 * Called automatically when data changes
 */
matchHotMappersSize(): void;

/**
 * Get global renderer VNode from component slots
 * @returns VNode marked with hot-renderer attribute
 */
getGlobalRendererVNode(): VNode | void;

/**
 * Create wrapper function for Vue renderer component
 * @param vNode - Vue component VNode for the renderer
 * @param containerComponent - Parent component instance
 * @returns Handsontable-compatible renderer function
 */
getRendererWrapper(vNode: VNode, containerComponent: Vue): (...args) => HTMLElement;

/**
 * Get global editor VNode from component slots
 * @returns VNode marked with hot-editor attribute
 */
getGlobalEditorVNode(): VNode | void;

/**
 * Create editor class from Vue component VNode
 * @param vNode - Vue component VNode for the editor
 * @param containerComponent - Parent component instance
 * @returns Handsontable-compatible editor class
 */
getEditorClass(vNode: VNode, containerComponent: Vue): typeof Handsontable.editors.BaseEditor;

interface HotTableData {
  /** Flag to prevent recursive updates during internal edits */
  __internalEdit: boolean;
  
  /** Internal reference to Handsontable instance */
  __hotInstance: Handsontable | null;
  
  /** Miscellaneous caching data */
  miscCache?: {
    currentSourceColumns?: number;
  };
  
  /** Public getter/setter for Handsontable instance */
  hotInstance?: Handsontable | null;
  
  /** Column settings from HotColumn components */
  columnSettings: HotTableProps[];
  
  /** LRU cache for renderer components */
  rendererCache: any;
  
  /** Cache for editor components */
  editorCache: Map<string, EditorComponent>;
}

/**
 * Merged settings from all props and current Handsontable state
 * Triggers Handsontable updates when changed
 */
readonly mergedHotSettings: Handsontable.GridSettings;

<template>
  <hot-table
    :data="data"
    :after-change="onAfterChange"
    :before-change="onBeforeChange"
    :after-selection="onAfterSelection"
    :before-update-settings="onBeforeUpdateSettings"
  />
</template>

<script>
export default {
  methods: {
    onAfterChange(changes, source) {
      console.log('Data changed:', changes, 'Source:', source);
    },
    
    onBeforeChange(changes, source) {
      // Return false to cancel changes
      if (changes.some(change => change[3] === 'invalid')) {
        return false;
      }
    },
    
    onAfterSelection(row, column, row2, column2) {
      console.log('Selection:', { row, column, row2, column2 });
    },
    
    onBeforeUpdateSettings(newSettings) {
      console.log('Settings will update:', newSettings);
    }
  }
}
</script>

/** 
 * Vue mounted lifecycle - initializes Handsontable instance
 * Sets up column settings and calls hotInit()
 */
mounted(): void;

/**
 * Vue beforeDestroy lifecycle - cleans up Handsontable instance
 * Calls instance.destroy() if instance exists
 */
beforeDestroy(): void;

interface HotTableProps extends Handsontable.GridSettings {
  /** Component DOM id, defaults to random 'hot-' + suffix */
  id?: string;
  
  /** Additional Handsontable settings object */
  settings?: Handsontable.GridSettings;
  
  /** LRU cache size for renderer components, default 3000 */
  wrapperRendererCacheSize?: number;
}

<template>
  <hot-table
    :data="tableData"
    license-key="non-commercial-and-evaluation"
    :row-headers="true"
    :col-headers="['Name', 'Email', 'Country']"
    :columns="columnSettings"
    :width="800"
    :height="400"
    theme="ht-theme-main-dark-auto"
    :read-only="isReadOnly"
    :context-menu="contextMenuConfig"
    :multi-column-sorting="true"
    :filters="true"
    :dropdown-menu="true"
  />
</template>