Comprehensive utility functions for data manipulation, DOM operations, and common programming tasks that extend Handsontable's functionality.
Utility functions for array operations and data manipulation.
/**
* Iterate over array elements
* @param array - Array to iterate over
* @param iteratee - Function called for each element
*/
function arrayEach<T>(array: T[], iteratee: (value: T, index: number) => boolean | void): void;
/**
* Transform array elements
* @param array - Array to transform
* @param iteratee - Transformation function
* @returns New array with transformed elements
*/
function arrayMap<T, U>(array: T[], iteratee: (value: T, index: number) => U): U[];
/**
* Filter array elements
* @param array - Array to filter
* @param predicate - Filter predicate function
* @returns New array with filtered elements
*/
function arrayFilter<T>(array: T[], predicate: (value: T, index: number) => boolean): T[];
/**
* Reduce array to single value
* @param array - Array to reduce
* @param iteratee - Reducer function
* @param accumulator - Initial accumulator value
* @returns Reduced value
*/
function arrayReduce<T, U>(array: T[], iteratee: (accumulator: U, value: T, index: number) => U, accumulator: U): U;
/**
* Calculate sum of numeric array
* @param array - Array of numbers
* @returns Sum of all elements
*/
function arraySum(array: number[]): number;
/**
* Find maximum value in array
* @param array - Array of numbers
* @returns Maximum value
*/
function arrayMax(array: number[]): number;
/**
* Find minimum value in array
* @param array - Array of numbers
* @returns Minimum value
*/
function arrayMin(array: number[]): number;
/**
* Calculate average of numeric array
* @param array - Array of numbers
* @returns Average value
*/
function arrayAvg(array: number[]): number;
/**
* Flatten nested arrays
* @param array - Nested array structure
* @returns Flattened array
*/
function arrayFlatten<T>(array: (T | T[])[]): T[];
/**
* Remove duplicate elements
* @param array - Array with potential duplicates
* @returns Array with unique elements
*/
function arrayUnique<T>(array: T[]): T[];
/**
* Transpose 2D array (swap rows and columns)
* @param array - 2D array to transpose
* @returns Transposed 2D array
*/
function pivot<T>(array: T[][]): T[][];
/**
* Convert array to 2D array
* @param array - Source array
* @returns 2D array representation
*/
function to2dArray<T>(array: T[]): T[][];Utility functions for DOM manipulation and cross-browser compatibility.
/**
* Add CSS class to element
* @param element - Target element
* @param className - Class name to add
*/
function addClass(element: HTMLElement, className: string): void;
/**
* Remove CSS class from element
* @param element - Target element
* @param className - Class name to remove
*/
function removeClass(element: HTMLElement, className: string): void;
/**
* Check if element has CSS class
* @param element - Target element
* @param className - Class name to check
* @returns True if element has class
*/
function hasClass(element: HTMLElement, className: string): boolean;
/**
* Set multiple attributes on element
* @param element - Target element
* @param attributes - Object with attribute key-value pairs
*/
function setAttribute(element: HTMLElement, attributes: { [key: string]: string }): void;
/**
* Remove attributes from element
* @param element - Target element
* @param attributes - Array of attribute names to remove
*/
function removeAttribute(element: HTMLElement, attributes: string[]): void;
/**
* Get element offset position
* @param element - Target element
* @returns Position object with top and left
*/
function offset(element: HTMLElement): { top: number; left: number };
/**
* Get element outer width including borders and padding
* @param element - Target element
* @returns Outer width in pixels
*/
function outerWidth(element: HTMLElement): number;
/**
* Get element outer height including borders and padding
* @param element - Target element
* @returns Outer height in pixels
*/
function outerHeight(element: HTMLElement): number;
/**
* Get element inner width excluding borders
* @param element - Target element
* @returns Inner width in pixels
*/
function innerWidth(element: HTMLElement): number;
/**
* Get element inner height excluding borders
* @param element - Target element
* @returns Inner height in pixels
*/
function innerHeight(element: HTMLElement): number;
/**
* Check if element is visible
* @param element - Target element
* @returns True if element is visible
*/
function isVisible(element: HTMLElement): boolean;
/**
* Get parent element at specified level
* @param element - Starting element
* @param level - Number of levels to traverse up
* @returns Parent element or null
*/
function getParent(element: HTMLElement, level?: number): HTMLElement | null;
/**
* Find closest matching parent element
* @param element - Starting element
* @param nodes - CSS selector or element array
* @returns Closest matching parent or null
*/
function closest(element: HTMLElement, nodes: string | HTMLElement[]): HTMLElement | null;
/**
* Check if element is child of another element
* @param child - Child element
* @param parent - Parent element
* @returns True if child is descendant of parent
*/
function isChildOf(child: HTMLElement, parent: HTMLElement): boolean;
/**
* Remove all child elements
* @param element - Parent element to empty
*/
function empty(element: HTMLElement): void;
/**
* Set innerHTML efficiently
* @param element - Target element
* @param content - HTML content to set
*/
function fastInnerHTML(element: HTMLElement, content: string): void;
/**
* Set innerText efficiently
* @param element - Target element
* @param text - Text content to set
*/
function fastInnerText(element: HTMLElement, text: string): void;Utility functions for object manipulation and property access.
/**
* Shallow extend target object with source properties
* @param target - Target object to extend
* @param extension - Source object with properties to copy
* @returns Extended target object
*/
function extend<T, U>(target: T, extension: U): T & U;
/**
* Deep extend target object with source properties
* @param target - Target object to extend
* @param extension - Source object with properties to copy
* @returns Extended target object
*/
function deepExtend<T, U>(target: T, extension: U): T & U;
/**
* Create shallow copy of object
* @param object - Object to clone
* @returns Shallow copy of object
*/
function clone<T>(object: T): T;
/**
* Create deep copy of object (JSON serializable objects only)
* @param object - Object to clone
* @returns Deep copy of object
*/
function deepClone<T>(object: T): T;
/**
* Iterate over object properties
* @param object - Object to iterate over
* @param iteratee - Function called for each property
*/
function objectEach<T>(object: { [key: string]: T }, iteratee: (value: T, key: string) => boolean | void): void;
/**
* Check if value is plain object
* @param value - Value to check
* @returns True if value is plain object
*/
function isObject(value: any): value is object;
/**
* Deep equality comparison of objects
* @param obj1 - First object
* @param obj2 - Second object
* @returns True if objects are deeply equal
*/
function isObjectEqual(obj1: any, obj2: any): boolean;
/**
* Get nested property value using path
* @param object - Source object
* @param path - Property path (e.g., 'user.profile.name')
* @returns Property value or undefined
*/
function getProperty(object: any, path: string): any;
/**
* Set nested property value using path
* @param object - Target object
* @param path - Property path (e.g., 'user.profile.name')
* @param value - Value to set
*/
function setProperty(object: any, path: string, value: any): void;
/**
* Safe hasOwnProperty check
* @param object - Object to check
* @param key - Property key
* @returns True if object has own property
*/
function hasOwnProperty(object: any, key: string): boolean;Utility functions for string manipulation and formatting.
/**
* Capitalize first letter of string
* @param string - Input string
* @returns String with first letter capitalized
*/
function toUpperCaseFirst(string: string): string;
/**
* Case-insensitive string comparison
* @param strings - Strings to compare
* @returns True if all strings are equal (case-insensitive)
*/
function equalsIgnoreCase(...strings: string[]): boolean;
/**
* Generate random hexadecimal string
* @returns Random hex string
*/
function randomString(): string;
/**
* Check if value is percentage format
* @param value - Value to check
* @returns True if value is percentage
*/
function isPercentValue(value: string): boolean;
/**
* Template string substitution
* @param template - Template string with placeholders
* @param variables - Variables object for substitution
* @returns String with substituted values
*/
function substitute(template: string, variables: { [key: string]: any }): string;
/**
* Remove HTML tags from string
* @param string - String with HTML tags
* @returns String with tags removed
*/
function stripTags(string: string): string;
/**
* Sanitize HTML content for safe insertion
* @param string - HTML string to sanitize
* @param options - Sanitization options
* @returns Sanitized HTML string
*/
function sanitize(string: string, options?: {
allowedTags?: string[];
allowedAttributes?: { [tag: string]: string[] };
}): string;Utility functions for numeric operations and validation.
/**
* Check if value is numeric
* @param value - Value to check
* @returns True if value is numeric
*/
function isNumeric(value: any): boolean;
/**
* Convert value to number with fallback
* @param value - Value to convert
* @param fallback - Fallback value if conversion fails
* @returns Number or fallback value
*/
function toNumber(value: any, fallback?: number): number;
/**
* Clamp number within range
* @param value - Number to clamp
* @param min - Minimum value
* @param max - Maximum value
* @returns Clamped number
*/
function clamp(value: number, min: number, max: number): number;
/**
* Generate range of numbers
* @param start - Starting number
* @param end - Ending number
* @param step - Step increment
* @returns Array of numbers in range
*/
function rangeEach(start: number, end: number, step?: number): number[];
/**
* Round number to specified decimal places
* @param value - Number to round
* @param decimals - Number of decimal places
* @returns Rounded number
*/
function toFixed(value: number, decimals: number): number;Utility functions for date manipulation and formatting.
/**
* Check if value is valid date
* @param value - Value to check
* @returns True if value is valid date
*/
function isDate(value: any): value is Date;
/**
* Parse date string to Date object
* @param dateString - Date string to parse
* @param format - Expected date format
* @returns Date object or null if invalid
*/
function parseDate(dateString: string, format?: string): Date | null;
/**
* Format date according to pattern
* @param date - Date to format
* @param pattern - Format pattern (e.g., 'MM/DD/YYYY')
* @returns Formatted date string
*/
function formatDate(date: Date, pattern: string): string;
/**
* Get number of days between two dates
* @param date1 - First date
* @param date2 - Second date
* @returns Number of days between dates
*/
function daysBetween(date1: Date, date2: Date): number;
/**
* Add days to date
* @param date - Base date
* @param days - Number of days to add
* @returns New date with added days
*/
function addDays(date: Date, days: number): Date;Utility functions for browser detection and feature checking.
/**
* Check if running in mobile browser
* @returns True if mobile browser
*/
function isMobile(): boolean;
/**
* Check if running in Internet Explorer
* @returns True if Internet Explorer
*/
function isIE(): boolean;
/**
* Check if running in Edge browser
* @returns True if Edge browser
*/
function isEdge(): boolean;
/**
* Check if running in Chrome browser
* @returns True if Chrome browser
*/
function isChrome(): boolean;
/**
* Check if running in Firefox browser
* @returns True if Firefox browser
*/
function isFirefox(): boolean;
/**
* Check if running in Safari browser
* @returns True if Safari browser
*/
function isSafari(): boolean;
/**
* Check if touch events are supported
* @returns True if touch is supported
*/
function isTouchSupported(): boolean;
/**
* Get browser version
* @returns Browser version string
*/
function getBrowserVersion(): string;
/**
* Check if running on macOS
* @returns True if macOS
*/
function isMacOS(): boolean;
/**
* Check if running on Windows
* @returns True if Windows
*/
function isWindows(): boolean;Usage Examples:
import {
arraySum,
addClass,
deepClone,
toUpperCaseFirst,
isMobile
} from 'handsontable/helpers';
// Array operations
const numbers = [1, 2, 3, 4, 5];
const total = arraySum(numbers); // 15
const data = [
['Alice', 25, 'Engineer'],
['Bob', 30, 'Designer'],
['Charlie', 35, 'Manager']
];
const transposed = pivot(data);
// DOM operations
const cell = document.querySelector('.ht_master td');
addClass(cell, 'highlighted');
const cellOffset = offset(cell);
// Object operations
const originalData = { user: { name: 'John', age: 30 } };
const copy = deepClone(originalData);
const userName = getProperty(copy, 'user.name');
// String operations
const title = toUpperCaseFirst('hello world'); // "Hello world"
const template = 'Hello {name}, you have {count} messages';
const message = substitute(template, { name: 'Alice', count: 5 });
// Browser detection
if (isMobile()) {
// Apply mobile-specific settings
hot.updateSettings({
touchScroll: true,
disableVisualSelection: true
});
}
// Custom helper usage in cell renderer
function customRenderer(instance, TD, row, col, prop, value, cellProperties) {
if (isNumeric(value)) {
TD.textContent = toFixed(parseFloat(value), 2);
addClass(TD, 'numeric-cell');
} else {
TD.textContent = stripTags(String(value));
}
return TD;
}