Menu
Use when developing or modifying the @handsontable/react-wrapper package - React components, hooks, settings mapping, and selection state preservation during updateSettings
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 creating or modifying a Handsontable cell type that composes an editor, renderer, and validator into a reusable configuration object registered by name
| name | react-wrapper-dev |
| path | wrappers/react-wrapper/** |
| description | Use when developing or modifying the @handsontable/react-wrapper package - React components, hooks, settings mapping, and selection state preservation during updateSettings |
wrappers/react-wrapper/
forwardRef wrapper that handles the actual instance lifecycle.A useRef() hook holds the live Handsontable instance. It is exposed to parent components through useImperativeHandle(), so consumers can call hotInstance.current to access the grid API directly.
SettingsMapper.getSettings() converts React props into a plain Handsontable settings object. Every prop change triggers updateSettings() on the instance.
Critical rule: When calling updateSettings(), you must preserve and restore the current selection. Before the call, snapshot the selection with selection.exportSelection(). After the call, restore it with selection.importSelection(). Forgetting this causes the selection to reset on every prop change.
useHotEditor() - a hook for building component-based cell editors. It gives the editor component access to the editor lifecycle (open, close, getValue, setValue).npm run test --prefix wrappers/react-wrappernpm run build --prefix handsontable. Wrappers consume handsontable/tmp/, not dist/.| File | Purpose |
|---|---|
src/hotTable.tsx | Public HotTable component |
src/hotTableInner.tsx | Inner component with instance lifecycle |
src/settingsMapper.ts | Converts React props to Handsontable settings |
src/hotColumn.tsx | Declarative column config component |
src/hotEditor.tsx | Custom editor portal component |
React StrictMode causes a double mount (mount -> unmount -> mount). This means Handsontable gets initialized twice. The wrapper must correctly destroy the instance on unmount and create a fresh one on the second mount. If cleanup is incomplete, the second mount can fail or leak memory. Always verify that destroy() is called on unmount and that no stale references persist.
handsontable/src/..mjs helpers instead of bash-only constructs (see scripts/prepare-types.mjs as reference).