JavaScript data grid component with spreadsheet-like functionality for React, Angular and Vue applications
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
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;
}