en un clic
handsontable-celltype-dev
Use when creating or modifying a Handsontable cell type that composes an editor, renderer, and validator into a reusable configuration object registered by name
Menu
Use when creating or modifying a Handsontable cell type that composes an editor, renderer, and validator into a reusable configuration object registered by name
Use for ANY work touching the `handsontable/` core package: fixing bugs, adding features, modifying TypeScript types, removing as-casts, writing or debugging plugins, editors, renderers, validators, cell types, hooks, shortcuts, selection, helpers, index translations, or i18n. Also use for how-to questions about core internals (plugin lifecycle, coordinate systems, hook registration, TypeScript conventions). Triggers on file paths under `handsontable/src/` (excluding `3rdparty/walkontable/` which has its own skill), or when the user describes a symptom in the core grid without naming a file. This is the primary entry point for all core Handsontable development — when in doubt, load it.
Use when creating code examples for documentation pages - JavaScript, TypeScript, React, Angular, and Vue variants with proper imports, registration, and license key
Use the pre-built code-review-graph knowledge graph for ANY cross-file task in this monorepo — exploring code, debugging symptom→root-cause, planning a safe refactor/rename, or reviewing a branch/PR. Reach for this BEFORE manual Grep+Read of call chains; results are 2-6x cheaper. Trigger on "who calls X", "what imports Y", "where is X used", "dependency chain", "blast radius", "trace this bug", "rename X across the codebase", "find dead code", "what would break if I change", "review this PR" — or any question that spans multiple files, even when Grep seems enough.
Use when working with row or column indexes in Handsontable - translating between physical, visual, and renderable coordinates, using IndexMapper, or debugging index-related bugs where rows or columns appear in wrong positions
Use when creating standalone examples in examples/next/docs/ for visual regression testing or documentation demos - covers the Vite-based example structure, sample data patterns, and multi-feature demonstration
Use when reviewing changed or staged code, a branch, or a PR in the Handsontable monorepo across architecture, code quality, performance, and accessibility. Covers SOLID / Law of Demeter / plugin decoupling / breaking-changes policy, custom ESLint rules / JSDoc / naming / cognitive complexity, large-array and render-batching performance, and WCAG 2.1 AA + keyboard navigation. Trigger when asked to review changes, check a diff against Handsontable conventions, assess architectural correctness, spot performance regressions, or verify accessibility — and as the design lens before or while implementing any core change.
| name | handsontable-celltype-dev |
| path | handsontable/src/cellTypes/** |
| description | Use when creating or modifying a Handsontable cell type that composes an editor, renderer, and validator into a reusable configuration object registered by name |
Cell types are composition objects, not classes. They bundle an editor, renderer, and validator under a single name:
export const MyCellType = {
CELL_TYPE: 'myType',
editor: MyEditor,
renderer: myRenderer,
validator: myValidator,
// Optional:
valueSetter: customSetter,
valueGetter: customGetter,
valueFormatter: customFormatter,
dataType: 'myType',
};
When a column or cell sets type: 'myType', Handsontable applies all composed components automatically.
src/cellTypes/{typeName}/
{typeName}.ts # Cell type object
index.ts # Re-exports
Registry: src/cellTypes/registry.ts.
import { registerCellType } from '../../cellTypes/registry';
registerCellType(MyCellType);
Also export from src/cellTypes/index.ts so the type is available in the full bundle.
New cell types must be added to src/dataMap/metaManager/metaSchema.ts so Handsontable recognizes the type name in configuration. Add the type string to the type option's accepted values.
type instead of specifying editor, renderer, and validator separately.validator if no validation is needed, or omit editor for read-only display types.type: 'myType' and renderer: customRenderer, the explicit renderer takes precedence over the one from the cell type.src/cellTypes/numericType/numericType.ts - Composes numeric editor, renderer, and validator.src/cellTypes/textType/textType.ts - Simplest type, good starting template.src/cellTypes/dateType/dateType.ts - Date handling with format options.src/cellTypes/checkboxType/checkboxType.ts - Boolean toggle pattern.src/cellTypes/registry.ts.metaSchema.ts, causing Handsontable to ignore the type name.src/cellTypes/index.ts for the full bundle.