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
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;
}