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

helper-utilities.mddocs/

Helper Utilities

Comprehensive utility functions for data manipulation, DOM operations, and common programming tasks that extend Handsontable's functionality.

Capabilities

Array Helpers

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[][];

DOM Element Helpers

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;

Object Helpers

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;

String Helpers

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;

Number Helpers

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;

Date Helpers

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;

Browser Helpers

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