Comprehensive cell type system with built-in editors, renderers, and validators for different data types including text, numeric, date, dropdown, and custom types.
System for registering and managing cell types that combine editors, renderers, and validators.
/**
* Register a new cell type
* @param name - Unique name for the cell type
* @param cellType - Cell type configuration object
*/
function registerCellType(name: string, cellType: CellType): void;
/**
* Get a registered cell type by name
* @param name - Cell type name
* @returns Cell type configuration
*/
function getCellType(name: string): CellType;
/**
* Check if a cell type is registered
* @param name - Cell type name
* @returns True if cell type exists
*/
function hasCellType(name: string): boolean;
/**
* Get all registered cell type names
* @returns Array of cell type names
*/
function getRegisteredCellTypeNames(): string[];
interface CellType {
editor?: EditorType;
renderer?: RendererType;
validator?: ValidatorType;
[key: string]: any;
}Basic text input with support for placeholders and text formatting.
// Text cell type configuration
const TextCellType: CellType = {
editor: TextEditor,
renderer: textRenderer,
validator: undefined
};
// Usage in column configuration
{
type: 'text',
title: 'Name',
placeholder: 'Enter name...',
trimWhitespace: true
}Numeric input with formatting, validation, and calculation support.
// Numeric cell type configuration
const NumericCellType: CellType = {
editor: NumericEditor,
renderer: numericRenderer,
validator: numericValidator
};
// Usage with formatting options
{
type: 'numeric',
title: 'Price',
numericFormat: {
pattern: '$0,0.00',
culture: 'en-US'
},
allowInvalid: false
}
interface NumericFormatOptions {
pattern?: string;
culture?: string;
}Boolean values displayed as checkboxes with customizable labels.
// Checkbox cell type configuration
const CheckboxCellType: CellType = {
editor: CheckboxEditor,
renderer: checkboxRenderer,
validator: undefined
};
// Usage with custom labels
{
type: 'checkbox',
title: 'Active',
checkedTemplate: true,
uncheckedTemplate: false,
label: {
position: 'after',
property: 'name' // Use another property for label
}
}Date input with calendar picker and format validation.
// Date cell type configuration
const DateCellType: CellType = {
editor: DateEditor,
renderer: dateRenderer,
validator: dateValidator
};
// Usage with date format
{
type: 'date',
title: 'Birth Date',
dateFormat: 'MM/DD/YYYY',
correctFormat: true,
defaultDate: '01/01/1900'
}Dropdown selection from predefined list of options.
// Dropdown cell type configuration
const DropdownCellType: CellType = {
editor: DropdownEditor,
renderer: dropdownRenderer,
validator: dropdownValidator
};
// Usage with source options
{
type: 'dropdown',
title: 'Category',
source: ['Electronics', 'Clothing', 'Books', 'Home'],
strict: true, // Only allow values from source
allowInvalid: false
}Text input with autocomplete suggestions and filtering.
// Autocomplete cell type configuration
const AutocompleteCellType: CellType = {
editor: AutocompleteEditor,
renderer: autocompleteRenderer,
validator: autocompleteValidator
};
// Usage with dynamic source
{
type: 'autocomplete',
title: 'Country',
source: ['United States', 'Canada', 'Mexico', 'United Kingdom'],
strict: false,
allowInvalid: true,
filter: true, // Enable filtering
trimDropdown: false
}Base editor class and built-in editors for different input types.
/**
* Base editor class that all editors extend
*/
class BaseEditor {
/**
* Initialize editor instance
*/
init(): void;
/**
* Prepare editor for editing
* @param row - Row index
* @param col - Column index
* @param prop - Column property
* @param TD - Cell element
* @param originalValue - Original cell value
* @param cellProperties - Cell configuration
*/
prepare(row: number, col: number, prop: string | number, TD: HTMLElement, originalValue: CellValue, cellProperties: CellProperties): void;
/**
* Get current editor value
* @returns Current value
*/
getValue(): CellValue;
/**
* Set editor value
* @param newValue - Value to set
*/
setValue(newValue: CellValue): void;
/**
* Open editor for editing
*/
open(): void;
/**
* Close editor
*/
close(): void;
/**
* Focus the editor
*/
focus(): void;
/**
* Create editor elements
*/
createElements(): void;
/**
* Check if editor is open
* @returns True if editor is open
*/
isOpened(): boolean;
/**
* Check if editor is waiting for input
* @returns True if waiting
*/
isWaiting(): boolean;
/**
* Destroy editor and clean up
*/
destroy(): void;
}
/**
* Register a new editor
* @param name - Editor name
* @param editorClass - Editor constructor
*/
function registerEditor(name: string, editorClass: typeof BaseEditor): void;
/**
* Get registered editor constructor
* @param name - Editor name
* @returns Editor constructor
*/
function getEditor(name: string): typeof BaseEditor;Functions for customizing how cell values are displayed.
/**
* Base renderer function signature
* @param instance - Handsontable instance
* @param TD - Cell element
* @param row - Row index
* @param col - Column index
* @param prop - Column property
* @param value - Cell value
* @param cellProperties - Cell configuration
* @returns Modified cell element
*/
type RendererType = (
instance: Core,
TD: HTMLElement,
row: number,
col: number,
prop: string | number,
value: CellValue,
cellProperties: CellProperties
) => HTMLElement;
/**
* Register a new renderer
* @param name - Renderer name
* @param rendererFunction - Renderer function
*/
function registerRenderer(name: string, rendererFunction: RendererType): void;
/**
* Get registered renderer function
* @param name - Renderer name
* @returns Renderer function
*/
function getRenderer(name: string): RendererType;
// Built-in renderers
function textRenderer(instance: Core, TD: HTMLElement, row: number, col: number, prop: string | number, value: CellValue, cellProperties: CellProperties): HTMLElement;
function numericRenderer(instance: Core, TD: HTMLElement, row: number, col: number, prop: string | number, value: CellValue, cellProperties: CellProperties): HTMLElement;
function checkboxRenderer(instance: Core, TD: HTMLElement, row: number, col: number, prop: string | number, value: CellValue, cellProperties: CellProperties): HTMLElement;
function dateRenderer(instance: Core, TD: HTMLElement, row: number, col: number, prop: string | number, value: CellValue, cellProperties: CellProperties): HTMLElement;
function htmlRenderer(instance: Core, TD: HTMLElement, row: number, col: number, prop: string | number, value: CellValue, cellProperties: CellProperties): HTMLElement;Functions for validating cell input and providing feedback.
/**
* Validator function signature
* @param value - Value to validate
* @param callback - Callback with validation result
*/
type ValidatorType = (value: CellValue, callback: (isValid: boolean) => void) => void;
/**
* Register a new validator
* @param name - Validator name
* @param validatorFunction - Validator function
*/
function registerValidator(name: string, validatorFunction: ValidatorType): void;
/**
* Get registered validator function
* @param name - Validator name
* @returns Validator function
*/
function getValidator(name: string): ValidatorType;
// Built-in validators
function numericValidator(value: CellValue, callback: (isValid: boolean) => void): void;
function dateValidator(value: CellValue, callback: (isValid: boolean) => void): void;
function timeValidator(value: CellValue, callback: (isValid: boolean) => void): void;
function autocompleteValidator(value: CellValue, callback: (isValid: boolean) => void): void;
function dropdownValidator(value: CellValue, callback: (isValid: boolean) => void): void;interface ColumnSettings {
// Basic properties
type?: string;
title?: string;
data?: string | number | ((row: any, value?: any) => any);
width?: number;
readOnly?: boolean;
className?: string;
// Cell type specific
editor?: string | EditorType | false;
renderer?: string | RendererType;
validator?: string | ValidatorType;
// Numeric options
numericFormat?: NumericFormatOptions;
allowInvalid?: boolean;
// Dropdown/Autocomplete options
source?: string[] | ((query: string, callback: (items: string[]) => void) => void);
strict?: boolean;
trimDropdown?: boolean;
// Date options
dateFormat?: string;
correctFormat?: boolean;
defaultDate?: string;
// Checkbox options
checkedTemplate?: any;
uncheckedTemplate?: any;
// Custom properties
[key: string]: any;
}
interface CellProperties extends ColumnSettings {
row: number;
col: number;
visualRow: number;
visualCol: number;
instance: Core;
}Usage Examples:
// Mixed cell types in columns
const hot = new Handsontable(container, {
data: myData,
columns: [
{
title: 'Product Name',
type: 'text',
placeholder: 'Enter product name'
},
{
title: 'Price',
type: 'numeric',
numericFormat: { pattern: '$0,0.00' },
allowInvalid: false
},
{
title: 'Category',
type: 'dropdown',
source: ['Electronics', 'Clothing', 'Books'],
strict: true
},
{
title: 'Launch Date',
type: 'date',
dateFormat: 'MM/DD/YYYY'
},
{
title: 'Available',
type: 'checkbox',
checkedTemplate: 'Yes',
uncheckedTemplate: 'No'
}
]
});
// Custom validator example
function emailValidator(value, callback) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
callback(emailRegex.test(value));
}
registerValidator('email', emailValidator);