Essential data grid functionality including initialization, data management, configuration, and basic grid interactions.
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
});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;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;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;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;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;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;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;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;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;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;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;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[];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;
}