or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cell-types-editing.mdcore-operations.mddata-grid-features.mdevent-system.mdhelper-utilities.mdindex.mdinternationalization.mdplugin-system.mdui-interaction.md
tile.json

core-operations.mddocs/

Core Grid Operations

Essential data grid functionality including initialization, data management, configuration, and basic grid interactions.

Capabilities

Handsontable Constructor

Creates a new Handsontable instance and initializes the data grid.

/**
 * Main Handsontable constructor
 * @param rootElement - HTML element to render the grid into
 * @param userSettings - Configuration options for the grid
 * @returns Core instance with full API
 */
function Handsontable(rootElement: HTMLElement, userSettings?: GridSettings): Core;

/**
 * Core class constructor (alternative instantiation)
 * @param rootElement - HTML element container
 * @param userSettings - Grid configuration options
 * @returns Core instance
 */
Handsontable.Core: (rootElement: HTMLElement, userSettings?: GridSettings) => Core;

Usage Examples:

// Basic grid initialization
const container = document.getElementById('grid-container');
const hot = new Handsontable(container, {
  data: [['A1', 'B1'], ['A2', 'B2']],
  colHeaders: true,
  rowHeaders: true
});

// Advanced configuration
const hot = new Handsontable(container, {
  data: myDataArray,
  columns: [
    { title: 'Name', type: 'text', width: 100 },
    { title: 'Age', type: 'numeric', width: 80 },
    { title: 'Active', type: 'checkbox', width: 60 }
  ],
  colHeaders: true,
  rowHeaders: true,
  contextMenu: true,
  manualColumnResize: true,
  columnSorting: true,
  filters: true,
  width: 800,
  height: 400
});

Data Management

Methods for loading, updating, and retrieving data from the grid.

/**
 * Load data into the grid, replacing existing data
 * @param data - 2D array of data or array of objects
 * @param source - Source of the data load
 */
loadData(data: any[][] | object[], source?: ChangeSource): void;

/**
 * Update data in the grid
 * @param data - 2D array of data or array of objects
 * @param source - Source of the data update
 */
updateData(data: any[][] | object[], source?: ChangeSource): void;

/**
 * Get source data (before any transformations)
 * @returns Original source data
 */
getSourceData(): any[][];

/**
 * Get source data at specific cell
 * @param row - Physical row index
 * @param col - Physical column index
 * @returns Original cell value
 */
getSourceDataAtCell(row: number, col: number): CellValue;

/**
 * Get source data for entire row
 * @param row - Physical row index
 * @returns Array of original values in the row
 */
getSourceDataAtRow(row: number): any[];

/**
 * Get source data for entire column
 * @param col - Physical column index
 * @returns Array of original values in the column
 */
getSourceDataAtCol(col: number): any[];

/**
 * Set source data at specific cell
 * @param row - Physical row index
 * @param col - Physical column index
 * @param value - New value
 */
setSourceDataAtCell(row: number, col: number, value: CellValue): void;

/**
 * Populate cells from array starting at specified position
 * @param row - Starting row
 * @param col - Starting column
 * @param input - 2D array of values
 * @param endRow - Ending row (optional)
 * @param endCol - Ending column (optional)
 * @param source - Source of the change
 * @param method - Populate method ('overwrite' | 'shift_down' | 'shift_right')
 * @param direction - Direction for shifting
 * @param deltas - Array of deltas for transformation
 */
populateFromArray(row: number, col: number, input: any[][], endRow?: number, endCol?: number, source?: ChangeSource, method?: string, direction?: string, deltas?: any[]): void;

/**
 * Get all data from the grid
 * @returns 2D array containing all grid data
 */
getData(): any[][];

/**
 * Get data within specified range
 * @param r1 - Start row
 * @param c1 - Start column
 * @param r2 - End row
 * @param c2 - End column
 * @returns 2D array of data in range
 */
getData(r1: number, c1: number, r2: number, c2: number): any[][];

/**
 * Get value of a single cell
 * @param row - Row index
 * @param col - Column index
 * @returns Cell value
 */
getDataAtCell(row: number, col: number): CellValue;

/**
 * Set value of a single cell
 * @param row - Row index
 * @param col - Column index
 * @param value - New cell value
 * @param source - Source of the change
 */
setDataAtCell(row: number, col: number, value: CellValue, source?: ChangeSource): void;

/**
 * Set multiple cell values at once
 * @param changes - Array of [row, col, newValue] tuples
 * @param source - Source of the change
 */
setDataAtCell(changes: [number, number, CellValue][], source?: ChangeSource): void;

/**
 * Get data for entire row
 * @param row - Row index
 * @returns Array of values in the row
 */
getDataAtRow(row: number): any[];

/**
 * Get data for entire column
 * @param col - Column index
 * @returns Array of values in the column
 */
getDataAtCol(col: number): any[];

/**
 * Get data at row using property name
 * @param row - Row index
 * @param prop - Property name or column index
 * @returns Cell value
 */
getDataAtRowProp(row: number, prop: string | number): CellValue;

/**
 * Set data at row using property name
 * @param row - Row index
 * @param prop - Property name or column index
 * @param value - New value
 * @param source - Source of the change
 */
setDataAtRowProp(row: number, prop: string | number, value: CellValue, source?: ChangeSource): void;

Grid Structure Management

Methods for manipulating grid structure including rows and columns.

/**
 * Insert new rows at specified position
 * @param index - Row index where to insert
 * @param amount - Number of rows to insert
 * @param source - Source of the change
 */
alter(action: 'insert_row', index: number, amount?: number, source?: ChangeSource): void;

/**
 * Remove rows at specified position
 * @param index - Row index to start removal
 * @param amount - Number of rows to remove
 * @param source - Source of the change
 */
alter(action: 'remove_row', index: number, amount?: number, source?: ChangeSource): void;

/**
 * Insert new columns at specified position
 * @param index - Column index where to insert
 * @param amount - Number of columns to insert
 * @param source - Source of the change
 */
alter(action: 'insert_col', index: number, amount?: number, source?: ChangeSource): void;

/**
 * Remove columns at specified position
 * @param index - Column index to start removal
 * @param amount - Number of columns to remove
 * @param source - Source of the change
 */
alter(action: 'remove_col', index: number, amount?: number, source?: ChangeSource): void;

/**
 * Get current number of rows
 * @returns Number of rows in the grid
 */
countRows(): number;

/**
 * Get current number of columns
 * @returns Number of columns in the grid
 */
countCols(): number;

/**
 * Get number of empty rows at the bottom
 * @returns Number of empty rows
 */
countEmptyRows(): number;

/**
 * Get number of empty columns at the right
 * @returns Number of empty columns
 */
countEmptyCols(): number;

/**
 * Count source rows (including hidden rows)
 * @returns Total number of source rows
 */
countSourceRows(): number;

/**
 * Count source columns (including hidden columns)
 * @returns Total number of source columns
 */
countSourceCols(): number;

/**
 * Count visible rows in viewport
 * @returns Number of visible rows
 */
countVisibleRows(): number;

/**
 * Count visible columns in viewport
 * @returns Number of visible columns
 */
countVisibleCols(): number;

/**
 * Count rendered rows (currently in DOM)
 * @returns Number of rendered rows
 */
countRenderedRows(): number;

/**
 * Count rendered columns (currently in DOM)
 * @returns Number of rendered columns
 */
countRenderedCols(): number;

/**
 * Count row headers
 * @returns Number of row headers
 */
countRowHeaders(): number;

/**
 * Count column headers
 * @returns Number of column headers
 */
countColHeaders(): number;

Selection Management

Methods for programmatically managing cell and range selection.

/**
 * Select a single cell
 * @param row - Row index
 * @param col - Column index
 * @param scrollToCell - Whether to scroll to the cell
 */
selectCell(row: number, col: number, scrollToCell?: boolean): boolean;

/**
 * Select multiple cells or ranges
 * @param row - Starting row
 * @param col - Starting column
 * @param endRow - Ending row
 * @param endCol - Ending column
 * @param scrollToCell - Whether to scroll to selection
 */
selectCells(row: number, col: number, endRow: number, endCol: number, scrollToCell?: boolean): boolean;

/**
 * Get currently selected range
 * @returns Array of selected CellRange objects
 */
getSelected(): [number, number, number, number][] | undefined;

/**
 * Clear current selection
 */
deselectCell(): void;

/**
 * Select all cells in the grid
 */
selectAll(): void;

/**
 * Select entire rows
 * @param startRow - Starting row index
 * @param endRow - Ending row index (optional)
 * @param scrollToCell - Whether to scroll to selection
 */
selectRows(startRow: number, endRow?: number, scrollToCell?: boolean): boolean;

/**
 * Select entire columns
 * @param startCol - Starting column index
 * @param endCol - Ending column index (optional)
 * @param scrollToCell - Whether to scroll to selection
 */
selectColumns(startCol: number, endCol?: number, scrollToCell?: boolean): boolean;

/**
 * Get selected range as CellRange objects
 * @returns Array of CellRange objects
 */
getSelectedRange(): CellRange[] | undefined;

/**
 * Get the last selected range
 * @returns Last selected range
 */
getSelectedRangeLast(): CellRange | undefined;

/**
 * Get currently selected cell coordinates
 * @returns Current selection coordinates
 */
getSelectedLast(): [number, number, number, number] | undefined;

Rendering and Updates

Methods for controlling grid rendering and updates.

/**
 * Force complete re-render of the grid
 */
render(): void;

/**
 * Update grid settings at runtime
 * @param settings - New settings to apply
 */
updateSettings(settings: Partial<GridSettings>): void;

/**
 * Destroy the grid instance and clean up
 */
destroy(): void;

/**
 * Check if the grid instance has been destroyed
 * @returns True if destroyed
 */
isDestroyed(): boolean;

/**
 * Refresh grid dimensions and layout
 */
refreshDimensions(): void;

/**
 * Clear all data from the grid
 */
clear(): void;

/**
 * Clear selected cells only
 */
emptySelectedCells(): void;

/**
 * Batch rendering operations for performance
 * @param wrappedOperation - Function to execute in batch
 * @param forceFullRender - Force full render after batch
 */
batchRender(wrappedOperation: () => void, forceFullRender?: boolean): void;

/**
 * Batch execution operations
 * @param wrappedOperation - Function to execute in batch
 */
batchExecution(wrappedOperation: () => void): void;

/**
 * Suspend rendering temporarily
 */
suspendRender(): void;

/**
 * Resume rendering
 */
resumeRender(): void;

/**
 * Suspend execution of operations
 */
suspendExecution(): void;

/**
 * Resume execution of operations
 */
resumeExecution(): void;

/**
 * Export grid data as HTML table
 * @returns HTML string representation
 */
toHTML(): string;

/**
 * Convert grid to HTML table element
 * @returns HTMLTableElement
 */
toTableElement(): HTMLTableElement;

Event System

Core event management for the Handsontable lifecycle.

/**
 * Add event listener for Handsontable hooks
 * @param key - Hook name
 * @param callback - Callback function
 * @param context - Execution context
 */
addHook(key: string, callback: Function, context?: object): void;

/**
 * Remove event listener
 * @param key - Hook name
 * @param callback - Callback function to remove
 */
removeHook(key: string, callback: Function): void;

/**
 * Run hook with arguments
 * @param key - Hook name
 * @param args - Arguments to pass to callbacks
 * @returns Hook result
 */
runHooks(key: string, ...args: any[]): any;

/**
 * Check if hook has any listeners
 * @param key - Hook name
 * @returns True if hook has listeners
 */
hasHook(key: string): boolean;

/**
 * Add hook that executes only once
 * @param key - Hook name
 * @param callback - Callback function
 * @param context - Execution context
 */
addHookOnce(key: string, callback: Function, context?: object): void;

/**
 * Get hooks instance
 * @returns Hooks manager instance
 */
getHooks(): Hooks;

Cell Metadata and Properties

Methods for managing cell-level metadata and properties.

/**
 * Get cell metadata at specific position
 * @param row - Row index
 * @param col - Column index
 * @returns Cell metadata object
 */
getCellMeta(row: number, col: number): CellMeta;

/**
 * Get metadata for entire row
 * @param row - Row index
 * @returns Array of cell metadata objects
 */
getCellMetaAtRow(row: number): CellMeta[];

/**
 * Get all cell metadata
 * @returns 2D array of cell metadata
 */
getCellsMeta(): CellMeta[][];

/**
 * Set cell metadata
 * @param row - Row index
 * @param col - Column index
 * @param key - Metadata key
 * @param value - Metadata value
 */
setCellMeta(row: number, col: number, key: string, value: any): void;

/**
 * Set multiple cell metadata properties
 * @param row - Row index
 * @param col - Column index
 * @param metaObject - Object with metadata properties
 */
setCellMetaObject(row: number, col: number, metaObject: object): void;

/**
 * Remove cell metadata
 * @param row - Row index
 * @param col - Column index
 * @param key - Metadata key to remove
 */
removeCellMeta(row: number, col: number, key: string): void;

/**
 * Get cell editor for specific cell
 * @param row - Row index
 * @param col - Column index
 * @returns Editor instance
 */
getCellEditor(row: number, col: number): BaseEditor | undefined;

/**
 * Get cell renderer for specific cell
 * @param row - Row index
 * @param col - Column index
 * @returns Renderer function
 */
getCellRenderer(row: number, col: column): RendererType;

/**
 * Get cell validator for specific cell
 * @param row - Row index
 * @param col - Column index
 * @returns Validator function
 */
getCellValidator(row: number, col: number): ValidatorType;

Validation Methods

Methods for validating cell data and handling validation results.

/**
 * Validate single cell
 * @param value - Value to validate
 * @param cellProperties - Cell properties object
 * @param callback - Validation result callback
 */
validateCell(value: CellValue, cellProperties: CellProperties, callback: (valid: boolean) => void): void;

/**
 * Validate all cells in the grid
 * @param callback - Callback when validation completes
 */
validateCells(callback?: (valid: boolean) => void): void;

/**
 * Validate specific columns
 * @param columns - Array of column indices
 * @param callback - Validation result callback
 */
validateColumns(columns: number[], callback?: (valid: boolean) => void): void;

/**
 * Validate specific rows
 * @param rows - Array of row indices
 * @param callback - Validation result callback
 */
validateRows(rows: number[], callback?: (valid: boolean) => void): void;

Navigation and Scrolling

Methods for programmatic navigation and viewport control.

/**
 * Scroll viewport to specific row and column
 * @param row - Target row
 * @param col - Target column
 * @param snapToTop - Snap to top of viewport
 * @param snapToLeft - Snap to left of viewport
 */
scrollViewportTo(row: number, col: number, snapToTop?: boolean, snapToLeft?: boolean): boolean;

/**
 * Scroll to currently focused cell
 */
scrollToFocusedCell(): void;

/**
 * Get first fully visible row in viewport
 * @returns Row index
 */
getFirstFullyVisibleRow(): number;

/**
 * Get last fully visible row in viewport
 * @returns Row index
 */
getLastFullyVisibleRow(): number;

/**
 * Get first fully visible column in viewport
 * @returns Column index
 */
getFirstFullyVisibleColumn(): number;

/**
 * Get last fully visible column in viewport
 * @returns Column index
 */
getLastFullyVisibleColumn(): number;

/**
 * Get first partially visible row in viewport
 * @returns Row index
 */
getFirstPartiallyVisibleRow(): number;

/**
 * Get last partially visible row in viewport
 * @returns Row index
 */
getLastPartiallyVisibleRow(): number;

/**
 * Get first partially visible column in viewport
 * @returns Column index
 */
getFirstPartiallyVisibleColumn(): number;

/**
 * Get last partially visible column in viewport
 * @returns Column index
 */
getLastPartiallyVisibleColumn(): number;

Index Translation

Methods for converting between physical and visual indices.

/**
 * Convert visual row index to physical row index
 * @param visualRow - Visual row index
 * @returns Physical row index
 */
toPhysicalRow(visualRow: number): number;

/**
 * Convert physical row index to visual row index
 * @param physicalRow - Physical row index
 * @returns Visual row index
 */
toVisualRow(physicalRow: number): number;

/**
 * Convert visual column index to physical column index
 * @param visualColumn - Visual column index
 * @returns Physical column index
 */
toPhysicalColumn(visualColumn: number): number;

/**
 * Convert physical column index to visual column index
 * @param physicalColumn - Physical column index
 * @returns Visual column index
 */
toVisualColumn(physicalColumn: number): number;

/**
 * Convert column index to property name
 * @param col - Column index
 * @returns Property name
 */
colToProp(col: number): string | number;

/**
 * Convert property name to column index
 * @param prop - Property name
 * @returns Column index
 */
propToCol(prop: string | number): number;

Undo/Redo Operations

Methods for managing undo and redo functionality.

/**
 * Undo last operation
 */
undo(): void;

/**
 * Redo last undone operation
 */
redo(): void;

/**
 * Check if undo is available
 * @returns True if undo operations are available
 */
isUndoAvailable(): boolean;

/**
 * Check if redo is available
 * @returns True if redo operations are available
 */
isRedoAvailable(): boolean;

/**
 * Clear undo/redo history
 */
clearUndo(): void;

Grid Dimensions and Layout

Methods for getting and managing grid layout properties.

/**
 * Get row height
 * @param row - Row index
 * @returns Height in pixels
 */
getRowHeight(row: number): number;

/**
 * Get column width
 * @param col - Column index
 * @returns Width in pixels
 */
getColWidth(col: number): number;

/**
 * Get total table width
 * @returns Width in pixels
 */
getTableWidth(): number;

/**
 * Get total table height
 * @returns Height in pixels
 */
getTableHeight(): number;

/**
 * Check if grid has row headers
 * @returns True if row headers are enabled
 */
hasRowHeaders(): boolean;

/**
 * Check if grid has column headers
 * @returns True if column headers are enabled
 */
hasColHeaders(): boolean;

/**
 * Get row header text
 * @param row - Row index
 * @returns Header text
 */
getRowHeader(row: number): string | number;

/**
 * Get column header text
 * @param col - Column index
 * @returns Header text
 */
getColHeader(col: number): string;

State Management

Methods for managing grid state and lifecycle.

/**
 * Initialize the grid
 */
init(): void;

/**
 * Check if grid is currently listening to events
 * @returns True if listening
 */
isListening(): boolean;

/**
 * Start listening to events
 */
listen(): void;

/**
 * Stop listening to events
 */
unlisten(): void;

/**
 * Get current grid settings
 * @returns Settings object
 */
getSettings(): GridSettings;

/**
 * Get single setting value
 * @param key - Setting key
 * @returns Setting value
 */
getSetting(key: string): any;

/**
 * Execute operations with suspended rendering
 * @param callback - Operations to execute
 */
suspendRender(callback: () => void): void;

/**
 * Splice row from data source
 * @param index - Row index
 * @param amount - Number of rows to remove
 * @param ...elements - Elements to insert
 * @returns Array of removed elements
 */
spliceRow(index: number, amount: number, ...elements: any[]): any[];

/**
 * Splice column from data source
 * @param index - Column index
 * @param amount - Number of columns to remove
 * @param ...elements - Elements to insert
 * @returns Array of removed elements
 */
spliceCol(index: number, amount: number, ...elements: any[]): any[];

Grid Settings Interface

interface CellMeta {
  row: number;
  col: number;
  visualRow: number;
  visualCol: number;
  type: string;
  source: any;
  readOnly: boolean;
  valid?: boolean;
  comment?: string;
  className?: string;
  renderer?: RendererType;
  editor?: EditorType;
  validator?: ValidatorType;
  [key: string]: any;
}

interface GridSettings {
  // Data configuration
  data?: any[][] | object[];
  columns?: ColumnSettings[];
  colHeaders?: boolean | string[] | ((col: number) => string);
  rowHeaders?: boolean | string[] | ((row: number) => string);
  
  // Dimensions
  width?: number | string;
  height?: number | string;
  minRows?: number;
  minCols?: number;
  maxRows?: number;
  maxCols?: number;
  minSpareRows?: number;
  minSpareCols?: number;
  
  // Behavior
  readOnly?: boolean;
  allowInsertRow?: boolean;
  allowInsertColumn?: boolean;
  allowRemoveRow?: boolean;
  allowRemoveColumn?: boolean;
  
  // Appearance
  className?: string;
  stretchH?: 'none' | 'last' | 'all';
  
  // Features
  contextMenu?: boolean | ContextMenuSettings;
  copyPaste?: boolean | CopyPasteSettings;
  columnSorting?: boolean | ColumnSortingSettings;
  filters?: boolean | FiltersSettings;
  manualColumnResize?: boolean | ManualColumnResizeSettings;
  manualRowResize?: boolean | ManualRowResizeSettings;
  manualColumnMove?: boolean | ManualColumnMoveSettings;
  manualRowMove?: boolean | ManualRowMoveSettings;
  
  // Hooks
  beforeInit?: () => void;
  afterInit?: () => void;
  beforeChange?: (changes: CellChange[], source: ChangeSource) => boolean | void;
  afterChange?: (changes: CellChange[] | null, source: ChangeSource) => void;
  beforeSelection?: (row: number, col: number, row2: number, col2: number) => boolean | void;
  afterSelection?: (row: number, col: number, row2: number, col2: number) => void;
  
  [key: string]: any;
}