Use when developing or modifying the @handsontable/vue3 wrapper package - Vue 3 SFC components, deep watchers, and provide/inject patterns for settings propagation
wrappers/vue3/
Components use defineComponent with propFactory('HotTable') to auto-generate prop definitions matching every Handsontable option.
Deep watchers (watch with deep: true) monitor prop changes. When a change is detected, the watcher calls updateSettings() on the Handsontable instance with the new values.
prepareSettings() is a helper that transforms Vue component props into a plain Handsontable settings object, filtering out Vue-specific properties.
Parent-child communication uses Vue's provide() / inject() pattern. The HotTable component provides its settings and instance reference so HotColumn children can register their column configurations.
Data handling: Data is synced by reference, not deep-copied. Mutations to the original data array are reflected in the grid without extra work. Avoid replacing the data array reference unless you intend a full reload.
@vue/test-utils.npm run test --prefix wrappers/vue3npm run build --prefix handsontable. Wrappers consume handsontable/tmp/, not dist/.| File | Purpose |
|---|---|
src/HotTable.vue | Main grid component |
src/HotColumn.vue | Per-column configuration component |
src/helpers.ts | Settings preparation and utility functions |
src/types.ts | TypeScript type definitions |
handsontable/src/..mjs helpers instead of bash-only constructs.